@blinkk/root-cms 1.0.0-beta.9 → 1.0.0-rc.1

package/dist/ui/ui.css

@@ -1,50 +1,268 @@
-/* ui/components/SplitPanel/SplitPanel.css */
-.SplitPanel {
+/* ui/components/Text/Text.css */
+.text {
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 400;
+  color: var(--color-text-default);
+}
+.text.size\:body-sm {
+  font-size: 12px;
+}
+.text.size\:body {
+  font-size: 14px;
+}
+.text.size\:body-lg {
+  font-size: 16px;
+}
+.text.weight\:regular {
+  font-weight: 400;
+}
+.text.weight\:semi-bold {
+  font-weight: 500;
+}
+.text.weight\:bold {
+  font-weight: 700;
+}
+.text.color\:gray {
+  color: var(--color-text-gray);
+}
+.text.color\:dark {
+  color: var(--color-text-dark);
+}
+.text code {
+  background: #efefef;
+  padding: 4px 8px;
+  border-radius: 2px;
+  white-space: nowrap;
+  font-family: var(--font-family-mono);
+  font-weight: 600;
+  margin-left: 4px;
+  margin-right: 4px;
+}
+
+/* ui/components/SlugInput/SlugInput.css */
+.SlugInput__inputs {
   display: flex;
-  height: 100%;
+  gap: 8px;
+  align-items: center;
 }
-.SplitPanel__divider {
-  flex: 0 0 3px;
-  width: 3px;
-  height: 100%;
-  cursor: col-resize;
-  position: relative;
+.SlugInput__slug {
+  flex: 1;
 }
-.SplitPanel__divider::before {
-  content: "";
-  display: block;
-  z-index: 0;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  left: 1px;
-  width: 1px;
-  background-color: var(--color-border);
+.SlugInput__urlHelp {
+  margin-top: 8px;
 }
-.SplitPanel__divider::after {
-  content: "";
-  display: block;
-  z-index: 1;
-  position: absolute;
-  top: 0;
+.SlugInput__urlHelp::before {
+  content: "URL: ";
+}
+
+/* ui/components/CopyDocModal/CopyDocModal.css */
+.CopyDocModal__from__label,
+.CopyDocModal__to__label {
+  margin-bottom: 8px;
+}
+.CopyDocModal__from__value code {
+  margin-left: 0;
+}
+.CopyDocModal__to {
+  margin-top: 16px;
+}
+.CopyDocModal__error {
+  margin: 24px 0;
+  font-size: 14px;
+  color: red;
+  font-weight: 600;
+}
+.CopyDocModal__buttons {
+  margin-top: 24px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+/* ui/components/EditJsonModal/EditJsonModal.css */
+.EditJsonModal__buttons {
+  margin-top: 24px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+/* ui/components/Heading/Heading.css */
+.heading {
+  font-size: 18px;
+  line-height: 1.2;
+  font-weight: 700;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.heading.size\:h1 {
+  font-size: 24px;
+}
+.heading.size\:h2 {
+  font-size: 18px;
+}
+.heading.size\:h3 {
+  font-size: 16px;
+}
+.heading.size\:h4 {
+  font-size: 14px;
+}
+.heading.weight\:regular {
+  font-weight: 400;
+}
+.heading.weight\:semi-bold {
+  font-weight: 500;
+}
+.heading.weight\:bold {
+  font-weight: 700;
+}
+.heading.color\:gray {
+  color: var(--color-text-gray);
+}
+.heading.color\:dark {
+  color: var(--color-text-dark);
+}
+
+/* ui/components/LocalizationModal/LocalizationModal.css */
+.LocalizationModal .mantine-Modal-modal {
+  padding: 30px 40px;
+}
+.LocalizationModal__layout {
+  display: grid;
+  grid-template-columns: 400px 1fr;
+  margin-top: -20px;
+  margin-bottom: 20px;
+}
+.LocalizationModal__iconTitle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.LocalizationModal__locales,
+.LocalizationModal__translations {
   height: 100%;
-  left: 0;
-  width: 100%;
-  background-color: transparent;
-  transition: background-color 0.18s ease;
+  min-height: 400px;
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+.LocalizationModal__locales {
+  padding-right: 30px;
+}
+.LocalizationModal__translations {
+  border-left: 1px solid var(--color-border);
+  padding-left: 30px;
+  margin-right: -30px;
+  padding-right: 30px;
+  max-height: 80vh;
+  overflow: auto;
 }
-.SplitPanel__divider:hover::after {
-  background-color: lightblue;
+.LocalizationModal__translations__header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 30px;
 }
-.SplitPanel__item.static {
-  flex: 0 0 var(--panel-size, 100%);
+.LocalizationModal__translations__header__buttons {
+  display: flex;
+  gap: 8px;
 }
-.SplitPanel__item.fluid {
-  flex: 1;
+.LocalizationModal__translations__table {
+  display: flex;
+  flex-direction: column;
 }
-.SplitPanel.dragging .SplitPanel__item {
-  pointer-events: none;
-  user-select: none;
+.LocalizationModal__translations__table__row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+.LocalizationModal__translations__table__row--header {
+  align-items: center;
+}
+.LocalizationModal__translations__table__row + .LocalizationModal__translations__table__row {
+  border-top: 1px solid var(--color-border);
+  padding-top: 12px;
+  margin-top: 12px;
+}
+.LocalizationModal__translations__table__header,
+.LocalizationModal__translations__table__col {
+  padding-left: 8px;
+  padding-right: 8px;
+  text-align: left;
+}
+.LocalizationModal__translations__localeSelect {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+/* ui/components/PublishDocModal/PublishDocModal.css */
+.PublishDocModal .mantine-Modal-title {
+  font-size: 14px;
+  font-weight: 500;
+}
+.PublishDocModal__content {
+  font-size: 12px;
+  line-height: 1.5;
+  font-weight: 500;
+}
+.PublishDocModal__form__publishOptions__label {
+  margin-bottom: 8px;
+}
+.PublishDocModal__form__publishOptions__options {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+.PublishDocModal__form__publishOptions__option {
+  border: 1px solid var(--color-border);
+  padding: 24px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: 1;
+  transition: all 0.3s ease;
+}
+.PublishDocModal__form__publishOptions__option--unselected {
+  opacity: 0.4;
+}
+.PublishDocModal__form__publishOptions__option--unselected:hover {
+  opacity: 0.6;
+}
+.PublishDocModal__form__publishOptions__option--selected {
+  border-color: #339af0;
+}
+.PublishDocModal__form__publishOptions__option__help {
+  padding-left: 24px;
+  font-size: 10px;
+  font-weight: 400;
+  margin-top: 4px;
+}
+.PublishDocModal__form__publishOptions__option__input {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.PublishDocModal__form__publishOptions__option__input2 {
+  padding-left: 20px;
+}
+.PublishDocModal__form__publishOptions__option__input2 input {
+  margin-top: 16px;
+  display: block;
+  width: 100%;
+  border: 1px solid #dedede;
+  padding: 6px 8px;
+  font-family: inherit;
+  font-size: 12px;
+}
+.PublishDocModal__form__publishOptions__option__input2__help {
+  font-size: 10px;
+  font-weight: 400;
+  margin-top: 4px;
+  text-align: right;
+}
+.PublishDocModal__form__buttons {
+  margin-top: 24px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
 }
 
 /* ui/layout/Layout.css */
@@ -145,6 +363,54 @@
   grid-area: bottom;
 }
 
+/* ui/pages/AssetsPage/AssetsPage.css */
+.AssetsPage {
+  padding: 60px;
+}
+.AssetsPage h1 {
+  margin-bottom: 24px;
+}
+.AssetsPage p {
+  margin-top: 16px;
+  max-width: 70ch;
+}
+
+/* ui/components/VersionHistoryModal/VersionHistoryModal.css */
+.VersionHistoryModal {
+  margin-top: -30px;
+  padding: 10px;
+}
+.VersionHistoryModal__title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.VersionHistoryModal__docId {
+  margin-top: 8px;
+}
+.VersionHistoryModal__docId code {
+  background: #efefef;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 600;
+  color: #333;
+}
+.VersionHistoryModal__versions {
+  margin-top: 20px;
+  margin-left: -10px;
+  margin-right: -10px;
+}
+.VersionHistoryModal__versionsEmpty {
+  margin-top: 20px;
+}
+.VersionHistoryModal__versionsEmpty__developer {
+  margin-top: 10px;
+  font-style: italic;
+  font-size: 12px;
+}
+
 /* ui/components/NewDocModal/NewDocModal.css */
 .NewDocModal__body {
   font-size: 12px;
@@ -161,6 +427,59 @@
   gap: 12px;
 }
 
+/* ui/components/SplitPanel/SplitPanel.css */
+.SplitPanel {
+  display: flex;
+  height: 100%;
+}
+.SplitPanel__divider {
+  flex: 0 0 3px;
+  width: 3px;
+  height: 100%;
+  cursor: col-resize;
+  position: relative;
+}
+.SplitPanel__divider::before {
+  content: "";
+  display: block;
+  z-index: 0;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  left: 1px;
+  width: 1px;
+  background-color: var(--color-border);
+}
+.SplitPanel__divider::after {
+  content: "";
+  display: block;
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  left: 0;
+  width: 100%;
+  background-color: transparent;
+  transition: background-color 0.18s ease;
+}
+.SplitPanel__divider:hover::after {
+  background-color: lightblue;
+}
+.SplitPanel__item {
+  overflow: hidden;
+  position: relative;
+}
+.SplitPanel__item.static {
+  flex: 0 0 var(--panel-size, 100%);
+}
+.SplitPanel__item.fluid {
+  flex: 1;
+}
+.SplitPanel.dragging .SplitPanel__item {
+  pointer-events: none;
+  user-select: none;
+}
+
 /* ui/pages/CollectionPage/CollectionPage.css */
 .CollectionPage__side__title {
   padding: 8px 12px;
@@ -242,6 +561,11 @@
   font-size: 14px;
   font-weight: 500;
 }
+.CollectionPage__collection {
+  height: 100%;
+  max-height: calc(100% - 48px);
+  overflow: auto;
+}
 .CollectionPage__collection__header {
   padding: 12px;
   display: none;
@@ -312,6 +636,7 @@
   align-items: center;
   padding: 8px 0;
   border-top: 1px solid var(--color-border);
+  overflow: hidden;
 }
 .CollectionPage__collection__docsList__doc__content {
   display: block;
@@ -345,6 +670,7 @@
   font-weight: 500;
 }
 .CollectionPage__collection__docsList__doc__image {
+  border: 1px solid var(--color-border);
   flex-shrink: 0;
 }
 .CollectionPage__collection__docsList__doc__content__title {
@@ -352,8 +678,9 @@
   font-size: 24px;
   font-weight: 600;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
 }
 .CollectionPage__collection__docsList__doc__content__url {
   font-size: 12px;
@@ -373,79 +700,16 @@
   font-weight: 500;
 }
 
-/* ui/components/Heading/Heading.css */
-.heading {
-  font-size: 18px;
-  line-height: 1.2;
-  font-weight: 700;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.heading.size\:h1 {
-  font-size: 24px;
-}
-.heading.size\:h2 {
-  font-size: 18px;
-}
-.heading.size\:h3 {
-  font-size: 16px;
-}
-.heading.weight\:regular {
-  font-weight: 400;
-}
-.heading.weight\:semi-bold {
-  font-weight: 500;
-}
-.heading.weight\:bold {
-  font-weight: 700;
-}
-.heading.color\:gray {
-  color: var(--color-text-gray);
-}
-.heading.color\:dark {
-  color: var(--color-text-dark);
-}
-
-/* ui/components/Text/Text.css */
-.text {
-  font-size: 14px;
-  line-height: 1.5;
-  font-weight: 400;
-  color: var(--color-text-default);
-}
-.text.size\:body-sm {
-  font-size: 12px;
-}
-.text.size\:body {
-  font-size: 14px;
-}
-.text.size\:body-lg {
-  font-size: 16px;
-}
-.text.weight\:regular {
-  font-weight: 400;
-}
-.text.weight\:semi-bold {
-  font-weight: 500;
-}
-.text.weight\:bold {
-  font-weight: 700;
-}
-.text.color\:gray {
-  color: var(--color-text-gray);
+/* ui/pages/DataPage/DataPage.css */
+.DataPage {
+  padding: 60px;
 }
-.text.color\:dark {
-  color: var(--color-text-dark);
+.DataPage h1 {
+  margin-bottom: 24px;
 }
-.text code {
-  background: #efefef;
-  padding: 4px 8px;
-  border-radius: 2px;
-  white-space: nowrap;
-  font-family: var(--font-family-mono);
-  font-weight: 600;
-  margin-left: 4px;
-  margin-right: 4px;
+.DataPage p {
+  margin-top: 16px;
+  max-width: 70ch;
 }
 
 /* ui/components/DocEditor/DocEditor.css */
@@ -477,6 +741,9 @@
 .DocEditor__statusBar__statusBadges {
   margin-right: 16px;
 }
+.DocEditor__statusBar__i18n {
+  margin-right: 8px;
+}
 .DocEditor__statusBar__actionsMenu {
   margin-left: 4px;
 }
@@ -488,6 +755,9 @@
 .DocEditor__field__name {
   font-weight: 600;
 }
+.DocEditor__field__help {
+  margin-top: 2px;
+}
 .DocEditor__ObjectField__fields {
   display: flex;
   flex-direction: column;
@@ -600,17 +870,29 @@
   flex-direction: column;
   gap: 24px;
 }
+.DocEditor__ImageField {
+  padding: 10px;
+  margin: -10px;
+}
+.DocEditor__ImageField.dragging {
+  outline: 2px dashed black;
+}
 .DocEditor__ImageField__imagePreview {
   margin-bottom: 10px;
 }
+.DocEditor__ImageField__imagePreview__controls {
+  display: flex;
+  justify-content: flex-end;
+  gap: 4px;
+}
 .DocEditor__ImageField__imagePreview__image {
   background: #f5f5f5;
   border: 1px solid #dedede;
   aspect-ratio: 16/9;
   width: 100%;
-  overflow: hidden;
   padding: 10px;
   margin-bottom: 10px;
+  position: relative;
 }
 .DocEditor__ImageField__imagePreview__image img {
   display: block;
@@ -619,12 +901,22 @@
   object-fit: contain;
   object-position: center;
 }
+.DocEditor__ImageField__imagePreview__dimens {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  padding: 4px 8px;
+  background: black;
+  color: white;
+  font-size: 8px;
+  font-weight: 700;
+}
 .DocEditor__ImageField__imagePreview__image__alt {
   margin-top: 4px;
 }
 .DocEditor__ImageField__noImage {
   font-family: var(--font-family-mono);
-  margin: 10px 0;
+  margin-bottom: 10px;
 }
 .DocEditor__ImageField__uploadButton {
   display: inline-flex;
@@ -647,44 +939,47 @@
 .DocEditor__ImageField__uploadButton__icon {
   margin-right: 10px;
 }
-
-/* ui/components/PublishDocModal/PublishDocModal.css */
-.PublishDocModal .mantine-Modal-title {
-  font-size: 14px;
-  font-weight: 500;
+.DocEditor__FileField {
+  padding: 10px;
+  margin: -10px;
 }
-.PublishDocModal__content {
-  font-size: 12px;
-  line-height: 1.5;
-  font-weight: 500;
+.DocEditor__FileField.dragging {
+  outline: 2px dashed black;
 }
-.PublishDocModal__form__publishOptions__label {
-  margin-bottom: 8px;
+.DocEditor__FileField__controls {
+  display: flex;
+  justify-content: flex-end;
+  gap: 4px;
 }
-.PublishDocModal__form__publishOptions__options {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
+.DocEditor__FileField__file {
+  margin-bottom: 10px;
 }
-.PublishDocModal__form__publishOptions__option {
-  border: 1px solid var(--color-border);
-  padding: 12px;
+.DocEditor__FileField__noFile {
+  font-family: var(--font-family-mono);
+  margin-bottom: 10px;
+}
+.DocEditor__FileField__uploadButton {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  background: #25262b;
   border-radius: 4px;
+  padding: 0 14px;
+  height: 30px;
+  color: #ffffff;
+  font-weight: 600;
+  transition: all 0.3s ease;
 }
-.PublishDocModal__form__publishOptions__option__help {
-  padding-left: 24px;
-  font-size: 10px;
-  font-weight: 400;
-  margin-top: 4px;
+.DocEditor__FileField__uploadButton[aria-disabled=true] {
+  opacity: 0.5;
 }
-.PublishDocModal__form__publishOptions__option__input input {
-  padding-top: 4px;
+.DocEditor__FileField__uploadButton input[type=file] {
+  display: none;
 }
-.PublishDocModal__form__publishOptions__option__input2 {
-  padding-left: 20px;
+.DocEditor__FileField__uploadButton__icon {
+  margin-right: 10px;
 }
-.PublishDocModal__form__publishOptions__option__input2 input {
-  margin-top: 16px;
+.DocEditor__DateTimeField input {
   display: block;
   width: 100%;
   border: 1px solid #dedede;
@@ -692,18 +987,12 @@
   font-family: inherit;
   font-size: 12px;
 }
-.PublishDocModal__form__publishOptions__option__input2__help {
+.DocEditor__DateTimeField__timezone {
   font-size: 10px;
   font-weight: 400;
   margin-top: 4px;
   text-align: right;
 }
-.PublishDocModal__form__buttons {
-  margin-top: 24px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-}
 
 /* ui/pages/DocumentPage/DocumentPage.css */
 .DocumentPage {
@@ -720,12 +1009,28 @@
   border-bottom: 1px solid var(--color-border);
   display: flex;
   align-items: center;
-  gap: 4px;
+  justify-content: space-between;
+  gap: 24px;
   height: var(--top-bar-height);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: white;
+}
+.DocumentPage__side__header__nav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 .DocumentPage__side__header__back {
   color: var(--color-text-default);
 }
+.DocumentPage__side__header__docId {
+  white-space: nowrap;
+}
+.DocumentPage__side__header__buttons {
+  justify-self: flex-end;
+}
 .DocumentPage__side__editor {
   padding: 8px 12px 120px;
 }
@@ -768,6 +1073,14 @@
   align-items: center;
   justify-content: space-between;
 }
+.DocumentPage__main__previewBar__locales .mantine-Select-input {
+  border: 1px solid var(--color-border);
+  font-size: 12px;
+  line-height: 24px;
+  height: 24px;
+  min-height: 24px;
+  max-width: 170px;
+}
 .DocumentPage__main__previewFrame {
   background: #f9f9f9;
   width: 100%;
@@ -812,18 +1125,6 @@
   font-size: 12px;
 }
 
-/* ui/pages/ProjectPage/ProjectPage.css */
-.ProjectPage {
-  padding: 60px;
-}
-.ProjectPage h1 {
-  margin-bottom: 24px;
-}
-.ProjectPage p {
-  margin-top: 16px;
-  max-width: 70ch;
-}
-
 /* ui/pages/NotFoundPage/NotFoundPage.css */
 .NotFoundPage {
   display: flex;
@@ -840,23 +1141,60 @@
   font-weight: 500;
 }
 
-/* ui/pages/SettingsPage/SettingsPage.css */
-.SettingsPage {
-  padding: 30px;
+/* ui/pages/ProjectPage/ProjectPage.css */
+.ProjectPage {
+  padding: 60px;
 }
-.SettingsPage__section {
+.ProjectPage h1 {
+  margin-bottom: 24px;
+}
+.ProjectPage p {
+  margin-top: 16px;
+  max-width: 70ch;
+}
+.ProjectPage__section {
+  margin-top: 60px;
+}
+.ProjectPage__section__title {
+  margin-bottom: 20px;
+}
+.ProjectPage__collectionList {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 12px;
+  max-width: 580px;
+}
+.ProjectPage__collectionList__collection {
   display: grid;
-  grid-template-columns: 1fr 2fr;
+  grid-template-columns: 20px 1fr;
+  align-items: center;
+  padding: 8px 12px;
+  column-gap: 12px;
+  row-gap: 4px;
+  width: 100%;
+  background: transparent;
+  border: 2px solid black;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: background-color 0.18s ease;
+  position: relative;
 }
-.SettingsPage__section__left,
-.SettingsPage__section__right {
-  padding: 30px;
+.ProjectPage__collectionList__collection:hover {
+  background-color: var(--button-background-hover);
 }
-.SettingsPage__section__left__title {
-  margin-bottom: 8px;
+.ProjectPage__collectionList__collection:active {
+  background-color: var(--button-background-active);
 }
-.SettingsPage__section__right__title {
-  margin-bottom: 12px;
+.ProjectPage__collectionList__collection__icon {
+  margin-top: 2px;
+}
+.ProjectPage__collectionList__collection__desc {
+  grid-column: 2 / span 1;
+  font-size: 12px;
 }
 
 /* ui/components/ShareBox/ShareBox.css */
@@ -888,28 +1226,23 @@
   text-overflow: ellipsis;
 }
 
-/* ui/pages/AssetsPage/AssetsPage.css */
-.AssetsPage {
-  padding: 60px;
-}
-.AssetsPage h1 {
-  margin-bottom: 24px;
+/* ui/pages/SettingsPage/SettingsPage.css */
+.SettingsPage {
+  padding: 30px;
 }
-.AssetsPage p {
-  margin-top: 16px;
-  max-width: 70ch;
+.SettingsPage__section {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
 }
-
-/* ui/pages/DataPage/DataPage.css */
-.DataPage {
-  padding: 60px;
+.SettingsPage__section__left,
+.SettingsPage__section__right {
+  padding: 30px;
 }
-.DataPage h1 {
-  margin-bottom: 24px;
+.SettingsPage__section__left__title {
+  margin-bottom: 8px;
 }
-.DataPage p {
-  margin-top: 16px;
-  max-width: 70ch;
+.SettingsPage__section__right__title {
+  margin-bottom: 12px;
 }
 
 /* ui/pages/TranslationsPage/TranslationsPage.css */