@ynput/ayon-frontend-shared 0.2.29 → 0.2.30

package/dist/shared/src/components/DetailsPanelDetails/DescriptionSection.styles.es.js

@@ -2,14 +2,19 @@ import o from "styled-components";
 const e = o.div`
   padding: 0;
   cursor: pointer;
-  height: 100%;
   display: flex;
   flex-direction: column;
+  min-width: 0;
+  height: 100%;
 
   &.editing {
     cursor: default;
     padding: 0;
     margin: 0;
+
+    .ql-container.ql-snow {
+      max-height: calc(100% - 57px);
+    }
   }
 
   &:not(.editing) {
@@ -35,6 +40,7 @@ const t = o.div`
   display: flex;
   flex-direction: column;
   flex: 1;
+  min-width: 0;
 
   .ql-toolbar.ql-snow {
     height: 40px;
@@ -124,17 +130,52 @@ const t = o.div`
     flex: 1;
     display: flex;
     flex-direction: column;
-    max-height: calc(100% - 57px);
+    min-width: 0;
+    padding: 12px;
 
     .ql-editor {
-      padding: 12px;
       min-height: 60px;
       flex: 1;
       overflow-y: auto;
+      overflow-x: auto;
+      min-width: 0;
+      padding: 0;
+      white-space: normal;   
+      word-break: keep-all;  
+      overflow-wrap: normal;
+
+      /* Consistent scrollbar styling across edit/read-only */
+      scrollbar-width: thin;
+      scrollbar-color: var(--md-sys-color-outline) transparent;
+
+      &::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--md-sys-color-outline);
+        border-radius: 8px;
+        border: 2px solid transparent;
+        background-clip: content-box;
+      }
+
+      &::-webkit-scrollbar-thumb:hover {
+        background-color: var(--md-sys-color-outline-variant);
+      }
+
+      width: 100%;
+      max-width: 100%;
       
       &[contenteditable="false"] {
-        pointer-events: none;
+        /* Allow scrolling in read-only mode */
+        pointer-events: auto;
         cursor: pointer !important;
+        -webkit-overflow-scrolling: touch;
         
         a {
           pointer-events: auto;
@@ -156,11 +197,26 @@ const t = o.div`
         background-color: var(--md-sys-color-surface-container-lowest);
         padding: var(--padding-m);
         border-radius: var(--border-radius-m);
+        font-family: monospace;
+        margin-bottom: 12px;
+      }
+
+      .ql-code-block-container .ql-code-block,
+      .ql-code-block-container .ql-code-block *,
+      .ql-code-block-container * {
+        font-family: monospace;
+        font-size: var(--md-sys-typescale-body-small-font-size);
       }
 
       a {
         color: var(--md-sys-color-primary);
         text-decoration: none;
+        /* Handle very long URLs and paths */
+        word-break: break-all;
+        overflow-wrap: break-word;
+        overflow-x: auto;
+        display: inline-block;
+        max-width: 100%;
       }
 
       strong {
@@ -186,6 +242,9 @@ const t = o.div`
       p {
         word-break: break-word;
         margin-bottom: 8px;
+        /* Handle very long unbreakable content like file paths */
+        overflow-x: auto;
+        min-width: 0;
       }
 
       ul,
@@ -210,6 +269,13 @@ const t = o.div`
           border-radius: 2px;
         }
       }
+
+      /* Handle very long unbreakable content like file paths */
+      * {
+        /* Allow horizontal scroll for any element with very long content */
+        overflow-x: auto;
+        min-width: 0;
+      }
     }
   }
 `, i = o.div`
@@ -336,6 +402,11 @@ const n = o.div`
   gap: 8px;
 `, l = o.div`
   height: 100%;
+  min-width: 0;
+
+  .quill {
+    height: 100%;
+  }
 
   /* Force cursor pointer when ReactQuill is readonly - comprehensive approach */
   .ql-container.ql-snow .ql-editor[contenteditable='false'] {
@@ -370,7 +441,7 @@ const n = o.div`
     a {
       pointer-events: auto !important;
       cursor: pointer !important;
-      
+
       &:hover {
         text-decoration: underline;
       }

package/dist/shared/src/components/DetailsPanelDetails/DescriptionSection.styles.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionSection.styles.es.js","sources":["../../../../../src/components/DetailsPanelDetails/DescriptionSection.styles.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const StyledContent = styled.div`\n  padding: 0;\n  cursor: pointer;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n\n  &.editing {\n    cursor: default;\n    padding: 0;\n    margin: 0;\n  }\n\n  &:not(.editing) {\n    cursor: pointer !important;\n\n    * {\n      cursor: pointer !important;\n    }\n  }\n`\n\nexport const StyledDescription = styled.div`\n  color: var(--md-sys-color-on-surface);\n  line-height: 1.5;\n  white-space: pre-wrap;\n  word-break: break-word;\n\n  &.empty {\n    color: var(--md-sys-color-on-surface-variant);\n    font-style: italic;\n  }\n`\n\nexport const StyledEditor = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n\n  .ql-toolbar.ql-snow {\n    height: 40px;\n    border: none;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n    padding: 4px;\n    display: flex;\n    width: unset;\n\n    .ql-formats {\n      margin-right: 8px;\n      padding-right: 8px;\n      border-right: 1px solid var(--md-sys-color-outline-variant);\n      display: flex;\n      gap: var(--base-gap-small);\n\n      &:last-child {\n        border-right: none;\n      }\n    }\n\n    button {\n      float: none;\n      height: 32px;\n      width: 32px;\n      border-radius: var(--border-radius-m);\n      transition: all 0.2s ease;\n      border: none;\n      background: transparent;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      /* Base styling matching activity section */\n      &,\n      .icon {\n        color: var(--md-sys-color-on-surface);\n      }\n\n      &.ql-active {\n        background-color: var(--md-sys-color-secondary-container);\n\n        .icon {\n          color: var(--md-sys-color-on-secondary-container);\n          font-weight: 600;\n        }\n      }\n\n      &:hover {\n        background-color: var(--md-sys-color-surface-container-high-hover);\n      }\n\n      &:hover.ql-active {\n        background-color: var(--md-sys-color-secondary-container-hover);\n      }\n\n      /* Special styling for header dropdown when active - matching activity reference styling */\n      &.ql-picker.ql-active {\n        background-color: var(--md-sys-color-secondary-container);\n        border: 1px solid var(--md-sys-color-outline);\n        border-radius: var(--border-radius-m);\n\n        .ql-picker-label {\n          color: var(--md-sys-color-on-secondary-container);\n          font-weight: 600;\n        }\n      }\n\n      /* Picker dropdown styling to match activity section */\n      &.ql-picker {\n        background-color: var(--md-sys-color-surface-container-high);\n        border-radius: var(--border-radius-m);\n\n        &:hover {\n          background-color: var(--md-sys-color-surface-container-high-hover);\n        }\n\n        &:active {\n          background-color: var(--md-sys-color-surface-container-high-active);\n        }\n      }\n    }\n  }\n\n  .ql-container.ql-snow {\n    border: none;\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    max-height: calc(100% - 57px);\n\n    .ql-editor {\n      padding: 12px;\n      min-height: 60px;\n      flex: 1;\n      overflow-y: auto;\n      \n      &[contenteditable=\"false\"] {\n        pointer-events: none;\n        cursor: pointer !important;\n        \n        a {\n          pointer-events: auto;\n          cursor: pointer !important;\n          \n          &:hover {\n            text-decoration: underline;\n          }\n        }\n      }\n\n      &.ql-blank::before {\n        color: var(--md-sys-color-on-surface-variant);\n        opacity: 0.6;\n        font-style: italic;\n      }\n\n      .ql-code-block-container {\n        background-color: var(--md-sys-color-surface-container-lowest);\n        padding: var(--padding-m);\n        border-radius: var(--border-radius-m);\n      }\n\n      a {\n        color: var(--md-sys-color-primary);\n        text-decoration: none;\n      }\n\n      strong {\n        em,\n        u,\n        a {\n          font-weight: 800;\n        }\n      }\n\n      /* Match activity section typography */\n      h1, h2 {\n        font-size: 24px;\n        margin-top: 16px;\n        margin-bottom: 8px;\n      }\n\n      h2  {\n        a, em, strong {\n        font-size: 20px;\n      }\n\n      p {\n        word-break: break-word;\n        margin-bottom: 8px;\n      }\n\n      ul,\n      ol {\n        margin: 16px 0 !important;\n        padding-left: 20px;\n      }\n\n      blockquote {\n        margin: 0;\n        padding-left: 16px;\n        position: relative;\n\n        &::before {\n          content: '';\n          position: absolute;\n          left: 0;\n          top: 0;\n          bottom: 0;\n          width: 4px;\n          background-color: var(--md-sys-color-outline-variant);\n          border-radius: 2px;\n        }\n      }\n    }\n  }\n`\n\nexport const StyledFooter = styled.div`\n  display: flex;\n  justify-content: end;\n  align-items: center;\n  padding: 8px;\n  height: 48px;\n  border-top: 1px solid var(--md-sys-color-outline-variant);\n`\n\nexport const StyledMarkdown = styled.div`\n  .markdown-content {\n    color: var(--md-sys-color-on-surface);\n    line-height: 1.5;\n    white-space: pre-wrap; /* prevent preserved newlines from adding extra gaps compared to editor */\n\n    /* Normalize spacing to match the editor */\n    /* Match editor heading sizes: Quill uses ~1.5em for H2 */\n    h1 {\n      font-size: 1.5rem;\n    }\n    h2 {\n      font-size: 24px;\n      margin-top: 16px;\n      margin-bottom: 8px;\n    }\n    h3 {\n      font-size: 1.125rem;\n    }\n\n    /* Avoid big gaps created by consecutive blank paragraphs */\n    p {\n      margin: 0;\n      &:last-child {\n        margin-bottom: 0;\n      }\n    }\n\n    pre {\n      background-color: var(--md-sys-color-surface-container-lowest);\n      padding: 8px;\n      border-radius: var(--border-radius-m);\n      overflow-x: auto;\n      margin: 0;\n      letter-spacing: 0.25px;\n    }\n\n    strong {\n      em,\n      a {\n        font-weight: 800 !important;\n      }\n    }\n\n    blockquote {\n      border-left: 3px solid var(--md-sys-color-outline);\n      margin: 8px 0;\n      padding-left: 12px;\n      color: var(--md-sys-color-on-surface-variant);\n    }\n\n    ul,\n    ol {\n      white-space: nowrap;\n      margin: 16px 0;\n      padding-left: 20px !important;\n    }\n\n    /* Handle mixed lists with data-list attributes */\n    ol li[data-list='bullet'] {\n      list-style-type: disc !important;\n    }\n\n    ol li[data-list='ordered'] {\n      list-style-type: decimal !important;\n    }\n\n    /* Remove extra vertical gap when markdown renders mixed list types consecutively */\n    ul + ul,\n    ul + ol,\n    ol + ul,\n    ol + ol {\n      /* Use a negative top margin to cancel the previous list's bottom margin (margin-collapsing) */\n      margin-top: -16px;\n    }\n\n    ol li {\n      list-style-type: decimal !important;\n      list-style-position: inside !important;\n    }\n\n    ul li {\n      list-style-type: circle !important;\n      list-style-position: inside !important;\n    }\n\n    a {\n      color: var(--md-sys-color-primary);\n      text-decoration: none;\n    }\n\n    h2 {\n      a,\n      em,\n      strong {\n        font-size: 20px;\n        margin-top: 16px;\n        margin-bottom: 8px;\n      }\n    }\n  }\n`\n\nexport const StyledLoadingSkeleton = styled.div`\n  height: 20px;\n  background: var(--md-sys-color-surface-container-low);\n  border-radius: 4px;\n`\n\nexport const StyledMultipleValues = styled.span`\n  color: var(--md-sys-color-on-surface-variant);\n  font-style: italic;\n`\n\nexport const StyledButtonContainer = styled.div`\n  display: flex;\n  gap: 8px;\n`\n\nexport const StyledQuillContainer = styled.div`\n  height: 100%;\n\n  /* Force cursor pointer when ReactQuill is readonly - comprehensive approach */\n  .ql-container.ql-snow .ql-editor[contenteditable='false'] {\n    cursor: pointer !important;\n\n    /* Override cursor for all child elements */\n    * {\n      cursor: pointer !important;\n    }\n\n    /* Specific overrides for common elements that might have different cursors */\n    a,\n    strong,\n    em,\n    code,\n    span,\n    div,\n    p,\n    li,\n    ol,\n    ul,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      cursor: pointer !important;\n    }\n\n    /* Ensure links are clickable and have proper cursor */\n    a {\n      pointer-events: auto !important;\n      cursor: pointer !important;\n      \n      &:hover {\n        text-decoration: underline;\n      }\n    }\n  }\n\n  /* Also handle blank state */\n  .ql-editor.ql-blank {\n    cursor: pointer !important;\n  }\n`\n\nexport const StyledHiddenMarkdown = styled.div`\n  position: fixed;\n  visibility: hidden;\n  pointer-events: none;\n  opacity: 0;\n  top: -9999px;\n  left: -9999px;\n`\n"],"names":["StyledContent","styled","StyledEditor","StyledFooter","StyledLoadingSkeleton","StyledButtonContainer","StyledQuillContainer","StyledHiddenMarkdown"],"mappings":"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"}
+{"version":3,"file":"DescriptionSection.styles.es.js","sources":["../../../../../src/components/DetailsPanelDetails/DescriptionSection.styles.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const StyledContent = styled.div`\n  padding: 0;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  height: 100%;\n\n  &.editing {\n    cursor: default;\n    padding: 0;\n    margin: 0;\n\n    .ql-container.ql-snow {\n      max-height: calc(100% - 57px);\n    }\n  }\n\n  &:not(.editing) {\n    cursor: pointer !important;\n\n    * {\n      cursor: pointer !important;\n    }\n  }\n`\n\nexport const StyledDescription = styled.div`\n  color: var(--md-sys-color-on-surface);\n  line-height: 1.5;\n  white-space: pre-wrap;\n  word-break: break-word;\n\n  &.empty {\n    color: var(--md-sys-color-on-surface-variant);\n    font-style: italic;\n  }\n`\n\nexport const StyledEditor = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n\n  .ql-toolbar.ql-snow {\n    height: 40px;\n    border: none;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n    padding: 4px;\n    display: flex;\n    width: unset;\n\n    .ql-formats {\n      margin-right: 8px;\n      padding-right: 8px;\n      border-right: 1px solid var(--md-sys-color-outline-variant);\n      display: flex;\n      gap: var(--base-gap-small);\n\n      &:last-child {\n        border-right: none;\n      }\n    }\n\n    button {\n      float: none;\n      height: 32px;\n      width: 32px;\n      border-radius: var(--border-radius-m);\n      transition: all 0.2s ease;\n      border: none;\n      background: transparent;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      /* Base styling matching activity section */\n      &,\n      .icon {\n        color: var(--md-sys-color-on-surface);\n      }\n\n      &.ql-active {\n        background-color: var(--md-sys-color-secondary-container);\n\n        .icon {\n          color: var(--md-sys-color-on-secondary-container);\n          font-weight: 600;\n        }\n      }\n\n      &:hover {\n        background-color: var(--md-sys-color-surface-container-high-hover);\n      }\n\n      &:hover.ql-active {\n        background-color: var(--md-sys-color-secondary-container-hover);\n      }\n\n      /* Special styling for header dropdown when active - matching activity reference styling */\n      &.ql-picker.ql-active {\n        background-color: var(--md-sys-color-secondary-container);\n        border: 1px solid var(--md-sys-color-outline);\n        border-radius: var(--border-radius-m);\n\n        .ql-picker-label {\n          color: var(--md-sys-color-on-secondary-container);\n          font-weight: 600;\n        }\n      }\n\n      /* Picker dropdown styling to match activity section */\n      &.ql-picker {\n        background-color: var(--md-sys-color-surface-container-high);\n        border-radius: var(--border-radius-m);\n\n        &:hover {\n          background-color: var(--md-sys-color-surface-container-high-hover);\n        }\n\n        &:active {\n          background-color: var(--md-sys-color-surface-container-high-active);\n        }\n      }\n    }\n  }\n\n  .ql-container.ql-snow {\n    border: none;\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    padding: 12px;\n\n    .ql-editor {\n      min-height: 60px;\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: auto;\n      min-width: 0;\n      padding: 0;\n      white-space: normal;   \n      word-break: keep-all;  \n      overflow-wrap: normal;\n\n      /* Consistent scrollbar styling across edit/read-only */\n      scrollbar-width: thin;\n      scrollbar-color: var(--md-sys-color-outline) transparent;\n\n      &::-webkit-scrollbar {\n        width: 8px;\n        height: 8px;\n      }\n\n      &::-webkit-scrollbar-track {\n        background: transparent;\n      }\n\n      &::-webkit-scrollbar-thumb {\n        background-color: var(--md-sys-color-outline);\n        border-radius: 8px;\n        border: 2px solid transparent;\n        background-clip: content-box;\n      }\n\n      &::-webkit-scrollbar-thumb:hover {\n        background-color: var(--md-sys-color-outline-variant);\n      }\n\n      width: 100%;\n      max-width: 100%;\n      \n      &[contenteditable=\"false\"] {\n        /* Allow scrolling in read-only mode */\n        pointer-events: auto;\n        cursor: pointer !important;\n        -webkit-overflow-scrolling: touch;\n        \n        a {\n          pointer-events: auto;\n          cursor: pointer !important;\n          \n          &:hover {\n            text-decoration: underline;\n          }\n        }\n      }\n\n      &.ql-blank::before {\n        color: var(--md-sys-color-on-surface-variant);\n        opacity: 0.6;\n        font-style: italic;\n      }\n\n      .ql-code-block-container {\n        background-color: var(--md-sys-color-surface-container-lowest);\n        padding: var(--padding-m);\n        border-radius: var(--border-radius-m);\n        font-family: monospace;\n        margin-bottom: 12px;\n      }\n\n      .ql-code-block-container .ql-code-block,\n      .ql-code-block-container .ql-code-block *,\n      .ql-code-block-container * {\n        font-family: monospace;\n        font-size: var(--md-sys-typescale-body-small-font-size);\n      }\n\n      a {\n        color: var(--md-sys-color-primary);\n        text-decoration: none;\n        /* Handle very long URLs and paths */\n        word-break: break-all;\n        overflow-wrap: break-word;\n        overflow-x: auto;\n        display: inline-block;\n        max-width: 100%;\n      }\n\n      strong {\n        em,\n        u,\n        a {\n          font-weight: 800;\n        }\n      }\n\n      /* Match activity section typography */\n      h1, h2 {\n        font-size: 24px;\n        margin-top: 16px;\n        margin-bottom: 8px;\n      }\n\n      h2  {\n        a, em, strong {\n        font-size: 20px;\n      }\n\n      p {\n        word-break: break-word;\n        margin-bottom: 8px;\n        /* Handle very long unbreakable content like file paths */\n        overflow-x: auto;\n        min-width: 0;\n      }\n\n      ul,\n      ol {\n        margin: 16px 0 !important;\n        padding-left: 20px;\n      }\n\n      blockquote {\n        margin: 0;\n        padding-left: 16px;\n        position: relative;\n\n        &::before {\n          content: '';\n          position: absolute;\n          left: 0;\n          top: 0;\n          bottom: 0;\n          width: 4px;\n          background-color: var(--md-sys-color-outline-variant);\n          border-radius: 2px;\n        }\n      }\n\n      /* Handle very long unbreakable content like file paths */\n      * {\n        /* Allow horizontal scroll for any element with very long content */\n        overflow-x: auto;\n        min-width: 0;\n      }\n    }\n  }\n`\n\nexport const StyledFooter = styled.div`\n  display: flex;\n  justify-content: end;\n  align-items: center;\n  padding: 8px;\n  height: 48px;\n  border-top: 1px solid var(--md-sys-color-outline-variant);\n`\n\nexport const StyledMarkdown = styled.div`\n  .markdown-content {\n    color: var(--md-sys-color-on-surface);\n    line-height: 1.5;\n    white-space: pre-wrap; /* prevent preserved newlines from adding extra gaps compared to editor */\n\n    /* Normalize spacing to match the editor */\n    /* Match editor heading sizes: Quill uses ~1.5em for H2 */\n    h1 {\n      font-size: 1.5rem;\n    }\n    h2 {\n      font-size: 24px;\n      margin-top: 16px;\n      margin-bottom: 8px;\n    }\n    h3 {\n      font-size: 1.125rem;\n    }\n\n    /* Avoid big gaps created by consecutive blank paragraphs */\n    p {\n      margin: 0;\n      &:last-child {\n        margin-bottom: 0;\n      }\n    }\n\n    pre {\n      background-color: var(--md-sys-color-surface-container-lowest);\n      padding: 8px;\n      border-radius: var(--border-radius-m);\n      overflow-x: auto;\n      margin: 0;\n      letter-spacing: 0.25px;\n    }\n\n    strong {\n      em,\n      a {\n        font-weight: 800 !important;\n      }\n    }\n\n    blockquote {\n      border-left: 3px solid var(--md-sys-color-outline);\n      margin: 8px 0;\n      padding-left: 12px;\n      color: var(--md-sys-color-on-surface-variant);\n    }\n\n    ul,\n    ol {\n      white-space: nowrap;\n      margin: 16px 0;\n      padding-left: 20px !important;\n    }\n\n    /* Handle mixed lists with data-list attributes */\n    ol li[data-list='bullet'] {\n      list-style-type: disc !important;\n    }\n\n    ol li[data-list='ordered'] {\n      list-style-type: decimal !important;\n    }\n\n    /* Remove extra vertical gap when markdown renders mixed list types consecutively */\n    ul + ul,\n    ul + ol,\n    ol + ul,\n    ol + ol {\n      /* Use a negative top margin to cancel the previous list's bottom margin (margin-collapsing) */\n      margin-top: -16px;\n    }\n\n    ol li {\n      list-style-type: decimal !important;\n      list-style-position: inside !important;\n    }\n\n    ul li {\n      list-style-type: circle !important;\n      list-style-position: inside !important;\n    }\n\n    a {\n      color: var(--md-sys-color-primary);\n      text-decoration: none;\n    }\n\n    h2 {\n      a,\n      em,\n      strong {\n        font-size: 20px;\n        margin-top: 16px;\n        margin-bottom: 8px;\n      }\n    }\n  }\n`\n\nexport const StyledLoadingSkeleton = styled.div`\n  height: 20px;\n  background: var(--md-sys-color-surface-container-low);\n  border-radius: 4px;\n`\n\nexport const StyledMultipleValues = styled.span`\n  color: var(--md-sys-color-on-surface-variant);\n  font-style: italic;\n`\n\nexport const StyledButtonContainer = styled.div`\n  display: flex;\n  gap: 8px;\n`\n\nexport const StyledQuillContainer = styled.div`\n  height: 100%;\n  min-width: 0;\n\n  .quill {\n    height: 100%;\n  }\n\n  /* Force cursor pointer when ReactQuill is readonly - comprehensive approach */\n  .ql-container.ql-snow .ql-editor[contenteditable='false'] {\n    cursor: pointer !important;\n\n    /* Override cursor for all child elements */\n    * {\n      cursor: pointer !important;\n    }\n\n    /* Specific overrides for common elements that might have different cursors */\n    a,\n    strong,\n    em,\n    code,\n    span,\n    div,\n    p,\n    li,\n    ol,\n    ul,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      cursor: pointer !important;\n    }\n\n    /* Ensure links are clickable and have proper cursor */\n    a {\n      pointer-events: auto !important;\n      cursor: pointer !important;\n\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n  }\n\n  /* Also handle blank state */\n  .ql-editor.ql-blank {\n    cursor: pointer !important;\n  }\n`\n\nexport const StyledHiddenMarkdown = styled.div`\n  position: fixed;\n  visibility: hidden;\n  pointer-events: none;\n  opacity: 0;\n  top: -9999px;\n  left: -9999px;\n`\n"],"names":["StyledContent","styled","StyledEditor","StyledFooter","StyledLoadingSkeleton","StyledButtonContainer","StyledQuillContainer","StyledHiddenMarkdown"],"mappings":";AAEO,MAAMA,IAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BHA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYjC,MAAMC,IAAeD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAoPtBE,IAAeF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASLA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuG9B,MAAMG,IAAwBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAMRA,EAAO;AAAA;AAAA;AAAA;AAKpC,MAAMI,IAAwBJ,EAAO;AAAA;AAAA;AAAA,GAK/BK,IAAuBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAsD9BM,IAAuBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/shared/src/components/DetailsPanelDetails/DetailsPanelDetails.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../../../_virtual/jsx-runtime.cjs.js"),P=require("../DetailsPanelAttributes/DetailsPanelAttributesEditor.cjs.js");require("../../api/base/client.cjs.js");require("../../api/generated/graphql.cjs.js");require("../../api/generated/graphqlLinks.cjs.js");require("../../api/generated/access.cjs.js");require("../../api/generated/actions.cjs.js");require("../../api/generated/activityFeed.cjs.js");require("../../api/generated/addons.cjs.js");require("../../api/generated/anatomy.cjs.js");require("../../api/generated/attributes.cjs.js");require("../../api/generated/authentication.cjs.js");require("../../api/generated/bundles.cjs.js");require("../../api/generated/configuration.cjs.js");require("../../api/generated/desktop.cjs.js");require("../../api/generated/entityLists.cjs.js");require("../../api/generated/events.cjs.js");require("../../api/generated/files.cjs.js");require("../../api/generated/folders.cjs.js");require("../../api/generated/inbox.cjs.js");require("../../api/generated/links.cjs.js");require("../../api/generated/market.cjs.js");require("../../api/generated/onboarding.cjs.js");require("../../api/generated/operations.cjs.js");require("../../api/generated/products.cjs.js");require("../../api/generated/projectDashboard.cjs.js");require("../../api/generated/projects.cjs.js");require("../../api/generated/reviewables.cjs.js");require("../../api/generated/services.cjs.js");require("../../api/generated/system.cjs.js");require("../../api/generated/tasks.cjs.js");require("../../api/generated/teams.cjs.js");require("../../api/generated/thumbnails.cjs.js");require("../../api/generated/uRIs.cjs.js");require("../../api/generated/users.cjs.js");require("../../api/generated/versions.cjs.js");require("../../api/generated/workfiles.cjs.js");require("../../api/generated/ynputCloud.cjs.js");require("../../api/generated/grouping.cjs.js");require("../../api/generated/views.cjs.js");require("../../api/queries/actions/getActions.cjs.js");const A=require("../../api/queries/activities/getActivities.cjs.js");require("../../api/queries/activities/updateActivities.cjs.js");require("../../api/queries/activities/updateReaction.cjs.js");require("../../api/queries/activities/getMentions.cjs.js");require("../../api/queries/addons/getAddons.cjs.js");require("../../api/queries/addons/updateAddons.cjs.js");require("../../api/queries/attributes/getAttributes.cjs.js");require("../../api/queries/attributes/updateAttributes.cjs.js");require("../../api/queries/authentication/getAuthentication.cjs.js");require("../../api/queries/cloud/cloud.cjs.js");require("../../api/queries/entities/getEntity.cjs.js");require("../../api/queries/entities/getEntityPanel.cjs.js");require("../../api/queries/entities/updateEntity.cjs.js");require("../../api/queries/entityLists/getLists.cjs.js");require("../../api/queries/entityLists/updateLists.cjs.js");require("../../api/queries/entityLists/getListsAttributes.cjs.js");require("../../api/queries/entityLists/updateListsAttributes.cjs.js");require("../../api/queries/folders/getFolders.cjs.js");require("../../api/queries/grouping/getGrouping.cjs.js");require("../../api/queries/links/updateLinks.cjs.js");require("../../api/queries/links/getLinks.cjs.js");require("../../api/queries/links/getEntityLinks.cjs.js");require("../../api/queries/overview/getOverview.cjs.js");require("../../api/queries/overview/updateOverview.cjs.js");require("../../api/queries/permissions/getPermissions.cjs.js");require("../../api/queries/products/createProduct.cjs.js");require("../../api/queries/project/getProject.cjs.js");require("../../api/queries/project/updateProject.cjs.js");require("../../api/queries/review/getReview.cjs.js");require("../../api/queries/review/updateReview.cjs.js");require("../../api/queries/share/share.cjs.js");require("../../api/queries/system/getSystem.cjs.js");require("../../api/queries/userDashboard/getUserDashboard.cjs.js");require("../../api/queries/users/getUsers.cjs.js");require("../../api/queries/users/updateUsers.cjs.js");require("../../api/queries/versions/updateVersions.cjs.js");require("../../api/queries/views/getViews.cjs.js");require("../../api/queries/views/updateViews.cjs.js");require("../../api/queries/watchers/getWatchers.cjs.js");const C=require("./DescriptionSection.cjs.js"),D=require("./DetailsSection.cjs.js"),R=require("styled-components");require("react");require("../../containers/Feed/components/CommentInput/quillToMarkdown.cjs.js");require("./hooks/useMentionSystem.cjs.js");require("../../containers/Feed/components/CommentInput/modules/index.cjs.js");const M=require("./hooks/useEntityFormData.cjs.js"),I=require("./hooks/useEntityFields.cjs.js"),O=require("./hooks/useEntityEditing.cjs.js"),w=require("./hooks/useEntityData.cjs.js"),B=R.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../../../_virtual/jsx-runtime.cjs.js"),P=require("../DetailsPanelAttributes/DetailsPanelAttributesEditor.cjs.js");require("../../api/base/client.cjs.js");require("../../api/generated/graphql.cjs.js");require("../../api/generated/graphqlLinks.cjs.js");require("../../api/generated/access.cjs.js");require("../../api/generated/actions.cjs.js");require("../../api/generated/activityFeed.cjs.js");require("../../api/generated/addons.cjs.js");require("../../api/generated/anatomy.cjs.js");require("../../api/generated/attributes.cjs.js");require("../../api/generated/authentication.cjs.js");require("../../api/generated/bundles.cjs.js");require("../../api/generated/configuration.cjs.js");require("../../api/generated/desktop.cjs.js");require("../../api/generated/entityLists.cjs.js");require("../../api/generated/events.cjs.js");require("../../api/generated/files.cjs.js");require("../../api/generated/folders.cjs.js");require("../../api/generated/inbox.cjs.js");require("../../api/generated/links.cjs.js");require("../../api/generated/market.cjs.js");require("../../api/generated/onboarding.cjs.js");require("../../api/generated/operations.cjs.js");require("../../api/generated/products.cjs.js");require("../../api/generated/projectDashboard.cjs.js");require("../../api/generated/projects.cjs.js");require("../../api/generated/reviewables.cjs.js");require("../../api/generated/services.cjs.js");require("../../api/generated/system.cjs.js");require("../../api/generated/tasks.cjs.js");require("../../api/generated/teams.cjs.js");require("../../api/generated/thumbnails.cjs.js");require("../../api/generated/uRIs.cjs.js");require("../../api/generated/users.cjs.js");require("../../api/generated/versions.cjs.js");require("../../api/generated/workfiles.cjs.js");require("../../api/generated/ynputCloud.cjs.js");require("../../api/generated/grouping.cjs.js");require("../../api/generated/views.cjs.js");require("../../api/queries/actions/getActions.cjs.js");const A=require("../../api/queries/activities/getActivities.cjs.js");require("../../api/queries/activities/updateActivities.cjs.js");require("../../api/queries/activities/updateReaction.cjs.js");require("../../api/queries/activities/getMentions.cjs.js");require("../../api/queries/addons/getAddons.cjs.js");require("../../api/queries/addons/updateAddons.cjs.js");require("../../api/queries/attributes/getAttributes.cjs.js");require("../../api/queries/attributes/updateAttributes.cjs.js");require("../../api/queries/authentication/getAuthentication.cjs.js");require("../../api/queries/cloud/cloud.cjs.js");require("../../api/queries/entities/getEntity.cjs.js");require("../../api/queries/entities/getEntityPanel.cjs.js");require("../../api/queries/entities/updateEntity.cjs.js");require("../../api/queries/entityLists/getLists.cjs.js");require("../../api/queries/entityLists/updateLists.cjs.js");require("../../api/queries/entityLists/getListsAttributes.cjs.js");require("../../api/queries/entityLists/updateListsAttributes.cjs.js");require("../../api/queries/entityLists/listFolders.cjs.js");require("../../api/queries/folders/getFolders.cjs.js");require("../../api/queries/grouping/getGrouping.cjs.js");require("../../api/queries/links/updateLinks.cjs.js");require("../../api/queries/links/getLinks.cjs.js");require("../../api/queries/links/getEntityLinks.cjs.js");require("../../api/queries/overview/getOverview.cjs.js");require("../../api/queries/overview/updateOverview.cjs.js");require("../../api/queries/permissions/getPermissions.cjs.js");require("../../api/queries/products/createProduct.cjs.js");require("../../api/queries/project/getProject.cjs.js");require("../../api/queries/project/updateProject.cjs.js");require("../../api/queries/review/getReview.cjs.js");require("../../api/queries/review/updateReview.cjs.js");require("../../api/queries/share/share.cjs.js");require("../../api/queries/system/getSystem.cjs.js");require("../../api/queries/userDashboard/getUserDashboard.cjs.js");require("../../api/queries/users/getUsers.cjs.js");require("../../api/queries/users/updateUsers.cjs.js");require("../../api/queries/versions/updateVersions.cjs.js");require("../../api/queries/views/getViews.cjs.js");require("../../api/queries/views/updateViews.cjs.js");require("../../api/queries/watchers/getWatchers.cjs.js");const C=require("./DescriptionSection.cjs.js"),D=require("./DetailsSection.cjs.js"),R=require("styled-components");require("react");require("../../containers/Feed/components/CommentInput/quillToMarkdown.cjs.js");require("./hooks/useMentionSystem.cjs.js");require("../../containers/Feed/components/CommentInput/modules/index.cjs.js");const M=require("./hooks/useEntityFormData.cjs.js"),I=require("./hooks/useEntityFields.cjs.js"),O=require("./hooks/useEntityEditing.cjs.js"),w=require("./hooks/useEntityData.cjs.js"),B=R.div`
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -6,7 +6,6 @@
   overflow-y: auto;
   padding-right: 8px;
   padding-left: 8px;
-  padding-bottom: 68px;
   margin-top: 16px;
 `,G=({entities:t=[],isLoading:u})=>{var a,y,x;const{formData:e,mixedFields:s,updateFormData:o,clearMixedField:g}=M.useEntityFormData(t,u),{folderTypes:E,taskTypes:j,statuses:h,tags:b,attributes:m}=w.useEntityData({projectName:e==null?void 0:e.projectName,isProjectNameMixed:s.includes("projectName")}),c=(t||[]).filter(r=>r.entityType==="folder"),{data:q}=A.useGetActivitiesInfiniteInfiniteQuery({entityIds:c.map(r=>r.id),projectName:(e==null?void 0:e.projectName)||"",referenceTypes:["origin","mention","relation"],activityTypes:["version.publish"]},{skip:!(e!=null&&e.projectName)||c.length===0}),f=!!((x=(y=(a=q==null?void 0:q.pages)==null?void 0:a[0])==null?void 0:y.activities)!=null&&x.length),{editableFields:T,readOnlyFieldsData:F}=I.useEntityFields({attributes:m,folderTypes:E,taskTypes:j,statuses:h,tags:b,entityType:e==null?void 0:e.entityType,folderHasVersions:f}),d=(e==null?void 0:e.entityType)||"task",{enableEditing:l,updateEntity:p}=O.useEntityEditing({entities:t,entityType:d}),S=(r,i)=>{r==="tags"&&(Array.isArray(i)||(i==null||i===""?i=[]:i=[String(i)])),r.startsWith("attrib.")&&(i={[r.replace("attrib.","")]:i},r="attrib"),o(r,i),p(r,i)},N=r=>{o("description",r),g("description"),p("attrib",{description:r})};return n.jsxRuntimeExports.jsxs(B,{children:[n.jsxRuntimeExports.jsx(C.DescriptionSection,{description:(e==null?void 0:e.description)||"",isMixed:s.includes("description"),enableEditing:l,onChange:N,isLoading:u}),n.jsxRuntimeExports.jsx(P.DetailsPanelAttributesEditor,{fields:T,form:e||{},mixedFields:s,isLoading:u,enableEditing:l,onChange:S,entities:t,entityType:d}),n.jsxRuntimeExports.jsx(D.DetailsSection,{fields:F,form:e||{},mixedFields:s,isLoading:u})]})};exports.DetailsPanelDetails=G;
 //# sourceMappingURL=DetailsPanelDetails.cjs.js.map

package/dist/shared/src/components/DetailsPanelDetails/DetailsPanelDetails.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsPanelDetails.cjs.js","sources":["../../../../../src/components/DetailsPanelDetails/DetailsPanelDetails.tsx"],"sourcesContent":["import {\n  DetailsPanelAttributesEditor,\n  DetailsPanelAttributesEditorProps,\n} from '../DetailsPanelAttributes/DetailsPanelAttributesEditor'\nimport type { DetailsPanelEntityData } from '@shared/api'\nimport { useGetActivitiesInfiniteInfiniteQuery } from '@shared/api'\nimport { DescriptionSection } from './DescriptionSection'\nimport { DetailsSection } from './DetailsSection'\nimport styled from 'styled-components'\nimport {\n  useEntityFormData,\n  useEntityFields,\n  useEntityEditing,\n  useEntityData,\n} from './hooks'\n\nconst StyledContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  gap: 12px;\n  overflow-y: auto;\n  padding-right: 8px;\n  padding-left: 8px;\n  padding-bottom: 68px;\n  margin-top: 16px;\n`\n\nexport type DetailsPanelDetailsProps = {\n  entities: DetailsPanelEntityData[]\n  isLoading: boolean\n}\n\nexport const DetailsPanelDetails = ({ entities = [], isLoading }: DetailsPanelDetailsProps) => {\n  const { formData, mixedFields, updateFormData, clearMixedField } = useEntityFormData(\n    entities,\n    isLoading,\n  )\n\n  const { folderTypes, taskTypes, statuses, tags, attributes } = useEntityData({\n    projectName: formData?.projectName,\n    isProjectNameMixed: mixedFields.includes('projectName'),\n  })\n\n  // Determine if any selected folder has published versions\n  const folderEntities = (entities || []).filter((entity) => entity.entityType === 'folder')\n  const { data: versionActivitiesData } = useGetActivitiesInfiniteInfiniteQuery(\n    {\n      entityIds: folderEntities.map((e) => e.id),\n      projectName: formData?.projectName || '',\n      referenceTypes: ['origin', 'mention', 'relation'],\n      activityTypes: ['version.publish'],\n    },\n    {\n      skip: !formData?.projectName || folderEntities.length === 0,\n    },\n  )\n\n  const folderHasVersions = Boolean(versionActivitiesData?.pages?.[0]?.activities?.length)\n\n  const { editableFields, readOnlyFieldsData } = useEntityFields({\n    attributes,\n    folderTypes,\n    taskTypes,\n    statuses,\n    tags,\n    entityType: formData?.entityType,\n    folderHasVersions,\n  })\n\n  const entityType = formData?.entityType || 'task'\n  const { enableEditing, updateEntity } = useEntityEditing({\n    entities,\n    entityType,\n  })\n\n  const handleChange: DetailsPanelAttributesEditorProps[\"onChange\"] = (key, value) => {\n    if (key === 'tags') {\n      if (Array.isArray(value)) {\n        // keep as-is\n      } else if (value === null || value === undefined || value === '') {\n        value = []\n      } else {\n        value = [String(value)]\n      }\n    }\n\n    if (key.startsWith('attrib.')) {\n      value = {\n        [key.replace('attrib.', '')]: value,\n      }\n      key = 'attrib'\n    }\n\n    updateFormData(key, value)\n    updateEntity(key, value)\n  }\n\n  const handleDescriptionChange = (description: string) => {\n    updateFormData('description', description)\n    clearMixedField('description')\n    updateEntity('attrib', { description })\n  }\n\n  return (\n    <StyledContainer>\n      <DescriptionSection\n        description={formData?.description || ''}\n        isMixed={mixedFields.includes('description')}\n        enableEditing={enableEditing}\n        onChange={handleDescriptionChange}\n        isLoading={isLoading}\n      />\n\n      <DetailsPanelAttributesEditor\n        fields={editableFields}\n        form={formData || {}}\n        mixedFields={mixedFields}\n        isLoading={isLoading}\n        enableEditing={enableEditing}\n        onChange={handleChange}\n        entities={entities}\n        entityType={entityType}\n      />\n\n      <DetailsSection\n        fields={readOnlyFieldsData}\n        form={formData || {}}\n        mixedFields={mixedFields}\n        isLoading={isLoading}\n      />\n    </StyledContainer>\n  )\n}\n"],"names":["StyledContainer","styled","DetailsPanelDetails","entities","isLoading","formData","mixedFields","updateFormData","clearMixedField","useEntityFormData","folderTypes","taskTypes","statuses","tags","attributes","useEntityData","folderEntities","entity","versionActivitiesData","useGetActivitiesInfiniteInfiniteQuery","e","folderHasVersions","_c","_b","_a","editableFields","readOnlyFieldsData","useEntityFields","entityType","enableEditing","updateEntity","useEntityEditing","handleChange","key","value","handleDescriptionChange","description","jsx","DescriptionSection","DetailsPanelAttributesEditor","DetailsSection"],"mappings":"6tJAgBMA,EAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBlBC,EAAsB,CAAC,CAAE,SAAAC,EAAW,CAAC,EAAG,UAAAC,KAA0C,WAC7F,KAAM,CAAE,SAAAC,EAAU,YAAAC,EAAa,eAAAC,EAAgB,gBAAAC,CAAoB,EAAAC,EAAA,kBACjEN,EACAC,CACF,EAEM,CAAE,YAAAM,EAAa,UAAAC,EAAW,SAAAC,EAAU,KAAAC,EAAM,WAAAC,GAAeC,gBAAc,CAC3E,YAAaV,GAAA,YAAAA,EAAU,YACvB,mBAAoBC,EAAY,SAAS,aAAa,CAAA,CACvD,EAGKU,GAAkBb,GAAY,IAAI,OAAQc,GAAWA,EAAO,aAAe,QAAQ,EACnF,CAAE,KAAMC,CAAA,EAA0BC,EAAA,sCACtC,CACE,UAAWH,EAAe,IAAKI,GAAMA,EAAE,EAAE,EACzC,aAAaf,GAAA,YAAAA,EAAU,cAAe,GACtC,eAAgB,CAAC,SAAU,UAAW,UAAU,EAChD,cAAe,CAAC,iBAAiB,CACnC,EACA,CACE,KAAM,EAACA,GAAA,MAAAA,EAAU,cAAeW,EAAe,SAAW,CAAA,CAE9D,EAEMK,EAAoB,IAAQC,GAAAC,GAAAC,EAAAN,GAAA,YAAAA,EAAuB,QAAvB,YAAAM,EAA+B,KAA/B,YAAAD,EAAmC,aAAnC,MAAAD,EAA+C,QAE3E,CAAE,eAAAG,EAAgB,mBAAAC,CAAmB,EAAIC,kBAAgB,CAC7D,WAAAb,EACA,YAAAJ,EACA,UAAAC,EACA,SAAAC,EACA,KAAAC,EACA,WAAYR,GAAA,YAAAA,EAAU,WACtB,kBAAAgB,CAAA,CACD,EAEKO,GAAavB,GAAA,YAAAA,EAAU,aAAc,OACrC,CAAE,cAAAwB,EAAe,aAAAC,CAAa,EAAIC,mBAAiB,CACvD,SAAA5B,EACA,WAAAyB,CAAA,CACD,EAEKI,EAA8D,CAACC,EAAKC,IAAU,CAC9ED,IAAQ,SACN,MAAM,QAAQC,CAAK,IAEZA,GAAU,MAA+BA,IAAU,GAC5DA,EAAQ,CAAC,EAEDA,EAAA,CAAC,OAAOA,CAAK,CAAC,IAItBD,EAAI,WAAW,SAAS,IAClBC,EAAA,CACN,CAACD,EAAI,QAAQ,UAAW,EAAE,CAAC,EAAGC,CAChC,EACMD,EAAA,UAGR1B,EAAe0B,EAAKC,CAAK,EACzBJ,EAAaG,EAAKC,CAAK,CACzB,EAEMC,EAA2BC,GAAwB,CACvD7B,EAAe,cAAe6B,CAAW,EACzC5B,EAAgB,aAAa,EAChBsB,EAAA,SAAU,CAAE,YAAAM,EAAa,CACxC,EAEA,gCACGpC,EACC,CAAA,SAAA,CAAAqC,EAAA,kBAAA,IAACC,EAAA,mBAAA,CACC,aAAajC,GAAA,YAAAA,EAAU,cAAe,GACtC,QAASC,EAAY,SAAS,aAAa,EAC3C,cAAAuB,EACA,SAAUM,EACV,UAAA/B,CAAA,CACF,EAEAiC,EAAA,kBAAA,IAACE,EAAA,6BAAA,CACC,OAAQd,EACR,KAAMpB,GAAY,CAAC,EACnB,YAAAC,EACA,UAAAF,EACA,cAAAyB,EACA,SAAUG,EACV,SAAA7B,EACA,WAAAyB,CAAA,CACF,EAEAS,EAAA,kBAAA,IAACG,EAAA,eAAA,CACC,OAAQd,EACR,KAAMrB,GAAY,CAAC,EACnB,YAAAC,EACA,UAAAF,CAAA,CAAA,CACF,EACF,CAEJ"}
+{"version":3,"file":"DetailsPanelDetails.cjs.js","sources":["../../../../../src/components/DetailsPanelDetails/DetailsPanelDetails.tsx"],"sourcesContent":["import {\n  DetailsPanelAttributesEditor,\n  DetailsPanelAttributesEditorProps,\n} from '../DetailsPanelAttributes/DetailsPanelAttributesEditor'\nimport type { DetailsPanelEntityData } from '@shared/api'\nimport { useGetActivitiesInfiniteInfiniteQuery } from '@shared/api'\nimport { DescriptionSection } from './DescriptionSection'\nimport { DetailsSection } from './DetailsSection'\nimport styled from 'styled-components'\nimport {\n  useEntityFormData,\n  useEntityFields,\n  useEntityEditing,\n  useEntityData,\n} from './hooks'\n\nconst StyledContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  gap: 12px;\n  overflow-y: auto;\n  padding-right: 8px;\n  padding-left: 8px;\n  margin-top: 16px;\n`\n\nexport type DetailsPanelDetailsProps = {\n  entities: DetailsPanelEntityData[]\n  isLoading: boolean\n}\n\nexport const DetailsPanelDetails = ({ entities = [], isLoading }: DetailsPanelDetailsProps) => {\n  const { formData, mixedFields, updateFormData, clearMixedField } = useEntityFormData(\n    entities,\n    isLoading,\n  )\n\n  const { folderTypes, taskTypes, statuses, tags, attributes } = useEntityData({\n    projectName: formData?.projectName,\n    isProjectNameMixed: mixedFields.includes('projectName'),\n  })\n\n  // Determine if any selected folder has published versions\n  const folderEntities = (entities || []).filter((entity) => entity.entityType === 'folder')\n  const { data: versionActivitiesData } = useGetActivitiesInfiniteInfiniteQuery(\n    {\n      entityIds: folderEntities.map((e) => e.id),\n      projectName: formData?.projectName || '',\n      referenceTypes: ['origin', 'mention', 'relation'],\n      activityTypes: ['version.publish'],\n    },\n    {\n      skip: !formData?.projectName || folderEntities.length === 0,\n    },\n  )\n\n  const folderHasVersions = Boolean(versionActivitiesData?.pages?.[0]?.activities?.length)\n\n  const { editableFields, readOnlyFieldsData } = useEntityFields({\n    attributes,\n    folderTypes,\n    taskTypes,\n    statuses,\n    tags,\n    entityType: formData?.entityType,\n    folderHasVersions,\n  })\n\n  const entityType = formData?.entityType || 'task'\n  const { enableEditing, updateEntity } = useEntityEditing({\n    entities,\n    entityType,\n  })\n\n  const handleChange: DetailsPanelAttributesEditorProps[\"onChange\"] = (key, value) => {\n    if (key === 'tags') {\n      if (Array.isArray(value)) {\n        // keep as-is\n      } else if (value === null || value === undefined || value === '') {\n        value = []\n      } else {\n        value = [String(value)]\n      }\n    }\n\n    if (key.startsWith('attrib.')) {\n      value = {\n        [key.replace('attrib.', '')]: value,\n      }\n      key = 'attrib'\n    }\n\n    updateFormData(key, value)\n    updateEntity(key, value)\n  }\n\n  const handleDescriptionChange = (description: string) => {\n    updateFormData('description', description)\n    clearMixedField('description')\n    updateEntity('attrib', { description })\n  }\n\n  return (\n    <StyledContainer>\n      <DescriptionSection\n        description={formData?.description || ''}\n        isMixed={mixedFields.includes('description')}\n        enableEditing={enableEditing}\n        onChange={handleDescriptionChange}\n        isLoading={isLoading}\n      />\n\n      <DetailsPanelAttributesEditor\n        fields={editableFields}\n        form={formData || {}}\n        mixedFields={mixedFields}\n        isLoading={isLoading}\n        enableEditing={enableEditing}\n        onChange={handleChange}\n        entities={entities}\n        entityType={entityType}\n      />\n\n      <DetailsSection\n        fields={readOnlyFieldsData}\n        form={formData || {}}\n        mixedFields={mixedFields}\n        isLoading={isLoading}\n      />\n    </StyledContainer>\n  )\n}\n"],"names":["StyledContainer","styled","DetailsPanelDetails","entities","isLoading","formData","mixedFields","updateFormData","clearMixedField","useEntityFormData","folderTypes","taskTypes","statuses","tags","attributes","useEntityData","folderEntities","entity","versionActivitiesData","useGetActivitiesInfiniteInfiniteQuery","e","folderHasVersions","_c","_b","_a","editableFields","readOnlyFieldsData","useEntityFields","entityType","enableEditing","updateEntity","useEntityEditing","handleChange","key","value","handleDescriptionChange","description","jsx","DescriptionSection","DetailsPanelAttributesEditor","DetailsSection"],"mappings":"yxJAgBMA,EAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBlBC,EAAsB,CAAC,CAAE,SAAAC,EAAW,CAAC,EAAG,UAAAC,KAA0C,WAC7F,KAAM,CAAE,SAAAC,EAAU,YAAAC,EAAa,eAAAC,EAAgB,gBAAAC,CAAoB,EAAAC,EAAA,kBACjEN,EACAC,CACF,EAEM,CAAE,YAAAM,EAAa,UAAAC,EAAW,SAAAC,EAAU,KAAAC,EAAM,WAAAC,GAAeC,gBAAc,CAC3E,YAAaV,GAAA,YAAAA,EAAU,YACvB,mBAAoBC,EAAY,SAAS,aAAa,CAAA,CACvD,EAGKU,GAAkBb,GAAY,IAAI,OAAQc,GAAWA,EAAO,aAAe,QAAQ,EACnF,CAAE,KAAMC,CAAA,EAA0BC,EAAA,sCACtC,CACE,UAAWH,EAAe,IAAKI,GAAMA,EAAE,EAAE,EACzC,aAAaf,GAAA,YAAAA,EAAU,cAAe,GACtC,eAAgB,CAAC,SAAU,UAAW,UAAU,EAChD,cAAe,CAAC,iBAAiB,CACnC,EACA,CACE,KAAM,EAACA,GAAA,MAAAA,EAAU,cAAeW,EAAe,SAAW,CAAA,CAE9D,EAEMK,EAAoB,IAAQC,GAAAC,GAAAC,EAAAN,GAAA,YAAAA,EAAuB,QAAvB,YAAAM,EAA+B,KAA/B,YAAAD,EAAmC,aAAnC,MAAAD,EAA+C,QAE3E,CAAE,eAAAG,EAAgB,mBAAAC,CAAmB,EAAIC,kBAAgB,CAC7D,WAAAb,EACA,YAAAJ,EACA,UAAAC,EACA,SAAAC,EACA,KAAAC,EACA,WAAYR,GAAA,YAAAA,EAAU,WACtB,kBAAAgB,CAAA,CACD,EAEKO,GAAavB,GAAA,YAAAA,EAAU,aAAc,OACrC,CAAE,cAAAwB,EAAe,aAAAC,CAAa,EAAIC,mBAAiB,CACvD,SAAA5B,EACA,WAAAyB,CAAA,CACD,EAEKI,EAA8D,CAACC,EAAKC,IAAU,CAC9ED,IAAQ,SACN,MAAM,QAAQC,CAAK,IAEZA,GAAU,MAA+BA,IAAU,GAC5DA,EAAQ,CAAC,EAEDA,EAAA,CAAC,OAAOA,CAAK,CAAC,IAItBD,EAAI,WAAW,SAAS,IAClBC,EAAA,CACN,CAACD,EAAI,QAAQ,UAAW,EAAE,CAAC,EAAGC,CAChC,EACMD,EAAA,UAGR1B,EAAe0B,EAAKC,CAAK,EACzBJ,EAAaG,EAAKC,CAAK,CACzB,EAEMC,EAA2BC,GAAwB,CACvD7B,EAAe,cAAe6B,CAAW,EACzC5B,EAAgB,aAAa,EAChBsB,EAAA,SAAU,CAAE,YAAAM,EAAa,CACxC,EAEA,gCACGpC,EACC,CAAA,SAAA,CAAAqC,EAAA,kBAAA,IAACC,EAAA,mBAAA,CACC,aAAajC,GAAA,YAAAA,EAAU,cAAe,GACtC,QAASC,EAAY,SAAS,aAAa,EAC3C,cAAAuB,EACA,SAAUM,EACV,UAAA/B,CAAA,CACF,EAEAiC,EAAA,kBAAA,IAACE,EAAA,6BAAA,CACC,OAAQd,EACR,KAAMpB,GAAY,CAAC,EACnB,YAAAC,EACA,UAAAF,EACA,cAAAyB,EACA,SAAUG,EACV,SAAA7B,EACA,WAAAyB,CAAA,CACF,EAEAS,EAAA,kBAAA,IAACG,EAAA,eAAA,CACC,OAAQd,EACR,KAAMrB,GAAY,CAAC,EACnB,YAAAC,EACA,UAAAF,CAAA,CAAA,CACF,EACF,CAEJ"}

package/dist/shared/src/components/DetailsPanelDetails/DetailsPanelDetails.es.js

@@ -56,6 +56,7 @@ import "../../api/queries/entityLists/getLists.es.js";
 import "../../api/queries/entityLists/updateLists.es.js";
 import "../../api/queries/entityLists/getListsAttributes.es.js";
 import "../../api/queries/entityLists/updateListsAttributes.es.js";
+import "../../api/queries/entityLists/listFolders.es.js";
 import "../../api/queries/folders/getFolders.es.js";
 import "../../api/queries/grouping/getGrouping.es.js";
 import "../../api/queries/links/updateLinks.es.js";
@@ -97,17 +98,16 @@ const Q = w.div`
   overflow-y: auto;
   padding-right: 8px;
   padding-left: 8px;
-  padding-bottom: 68px;
   margin-top: 16px;
-`, Ei = ({ entities: o = [], isLoading: p }) => {
+`, ui = ({ entities: o = [], isLoading: p }) => {
   var y, f, x;
-  const { formData: t, mixedFields: m, updateFormData: s, clearMixedField: g } = B(
+  const { formData: t, mixedFields: m, updateFormData: n, clearMixedField: g } = B(
     o,
     p
-  ), { folderTypes: h, taskTypes: j, statuses: b, tags: E, attributes: u } = O({
+  ), { folderTypes: h, taskTypes: j, statuses: E, tags: b, attributes: u } = O({
     projectName: t == null ? void 0 : t.projectName,
     isProjectNameMixed: m.includes("projectName")
-  }), d = (o || []).filter((i) => i.entityType === "folder"), { data: n } = I(
+  }), d = (o || []).filter((i) => i.entityType === "folder"), { data: s } = I(
     {
       entityIds: d.map((i) => i.id),
       projectName: (t == null ? void 0 : t.projectName) || "",
@@ -117,12 +117,12 @@ const Q = w.div`
     {
       skip: !(t != null && t.projectName) || d.length === 0
     }
-  ), T = !!((x = (f = (y = n == null ? void 0 : n.pages) == null ? void 0 : y[0]) == null ? void 0 : f.activities) != null && x.length), { editableFields: F, readOnlyFieldsData: N } = G({
+  ), T = !!((x = (f = (y = s == null ? void 0 : s.pages) == null ? void 0 : y[0]) == null ? void 0 : f.activities) != null && x.length), { editableFields: F, readOnlyFieldsData: N } = G({
     attributes: u,
     folderTypes: h,
     taskTypes: j,
-    statuses: b,
-    tags: E,
+    statuses: E,
+    tags: b,
     entityType: t == null ? void 0 : t.entityType,
     folderHasVersions: T
   }), c = (t == null ? void 0 : t.entityType) || "task", { enableEditing: l, updateEntity: a } = H({
@@ -131,9 +131,9 @@ const Q = w.div`
   }), C = (i, r) => {
     i === "tags" && (Array.isArray(r) || (r == null || r === "" ? r = [] : r = [String(r)])), i.startsWith("attrib.") && (r = {
       [i.replace("attrib.", "")]: r
-    }, i = "attrib"), s(i, r), a(i, r);
+    }, i = "attrib"), n(i, r), a(i, r);
   }, S = (i) => {
-    s("description", i), g("description"), a("attrib", { description: i });
+    n("description", i), g("description"), a("attrib", { description: i });
   };
   return /* @__PURE__ */ e.jsxs(Q, { children: [
     /* @__PURE__ */ e.jsx(
@@ -171,6 +171,6 @@ const Q = w.div`
   ] });
 };
 export {
-  Ei as DetailsPanelDetails
+  ui as DetailsPanelDetails
 };
 //# sourceMappingURL=DetailsPanelDetails.es.js.map

package/dist/shared/src/components/DetailsPanelDetails/DetailsPanelDetails.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsPanelDetails.es.js","sources":["../../../../../src/components/DetailsPanelDetails/DetailsPanelDetails.tsx"],"sourcesContent":["import {\n  DetailsPanelAttributesEditor,\n  DetailsPanelAttributesEditorProps,\n} from '../DetailsPanelAttributes/DetailsPanelAttributesEditor'\nimport type { DetailsPanelEntityData } from '@shared/api'\nimport { useGetActivitiesInfiniteInfiniteQuery } from '@shared/api'\nimport { DescriptionSection } from './DescriptionSection'\nimport { DetailsSection } from './DetailsSection'\nimport styled from 'styled-components'\nimport {\n  useEntityFormData,\n  useEntityFields,\n  useEntityEditing,\n  useEntityData,\n} from './hooks'\n\nconst StyledContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  gap: 12px;\n  overflow-y: auto;\n  padding-right: 8px;\n  padding-left: 8px;\n  padding-bottom: 68px;\n  margin-top: 16px;\n`\n\nexport type DetailsPanelDetailsProps = {\n  entities: DetailsPanelEntityData[]\n  isLoading: boolean\n}\n\nexport const DetailsPanelDetails = ({ entities = [], isLoading }: DetailsPanelDetailsProps) => {\n  const { formData, mixedFields, updateFormData, clearMixedField } = useEntityFormData(\n    entities,\n    isLoading,\n  )\n\n  const { folderTypes, taskTypes, statuses, tags, attributes } = useEntityData({\n    projectName: formData?.projectName,\n    isProjectNameMixed: mixedFields.includes('projectName'),\n  })\n\n  // Determine if any selected folder has published versions\n  const folderEntities = (entities || []).filter((entity) => entity.entityType === 'folder')\n  const { data: versionActivitiesData } = useGetActivitiesInfiniteInfiniteQuery(\n    {\n      entityIds: folderEntities.map((e) => e.id),\n      projectName: formData?.projectName || '',\n      referenceTypes: ['origin', 'mention', 'relation'],\n      activityTypes: ['version.publish'],\n    },\n    {\n      skip: !formData?.projectName || folderEntities.length === 0,\n    },\n  )\n\n  const folderHasVersions = Boolean(versionActivitiesData?.pages?.[0]?.activities?.length)\n\n  const { editableFields, readOnlyFieldsData } = useEntityFields({\n    attributes,\n    folderTypes,\n    taskTypes,\n    statuses,\n    tags,\n    entityType: formData?.entityType,\n    folderHasVersions,\n  })\n\n  const entityType = formData?.entityType || 'task'\n  const { enableEditing, updateEntity } = useEntityEditing({\n    entities,\n    entityType,\n  })\n\n  const handleChange: DetailsPanelAttributesEditorProps[\"onChange\"] = (key, value) => {\n    if (key === 'tags') {\n      if (Array.isArray(value)) {\n        // keep as-is\n      } else if (value === null || value === undefined || value === '') {\n        value = []\n      } else {\n        value = [String(value)]\n      }\n    }\n\n    if (key.startsWith('attrib.')) {\n      value = {\n        [key.replace('attrib.', '')]: value,\n      }\n      key = 'attrib'\n    }\n\n    updateFormData(key, value)\n    updateEntity(key, value)\n  }\n\n  const handleDescriptionChange = (description: string) => {\n    updateFormData('description', description)\n    clearMixedField('description')\n    updateEntity('attrib', { description })\n  }\n\n  return (\n    <StyledContainer>\n      <DescriptionSection\n        description={formData?.description || ''}\n        isMixed={mixedFields.includes('description')}\n        enableEditing={enableEditing}\n        onChange={handleDescriptionChange}\n        isLoading={isLoading}\n      />\n\n      <DetailsPanelAttributesEditor\n        fields={editableFields}\n        form={formData || {}}\n        mixedFields={mixedFields}\n        isLoading={isLoading}\n        enableEditing={enableEditing}\n        onChange={handleChange}\n        entities={entities}\n        entityType={entityType}\n      />\n\n      <DetailsSection\n        fields={readOnlyFieldsData}\n        form={formData || {}}\n        mixedFields={mixedFields}\n        isLoading={isLoading}\n      />\n    </StyledContainer>\n  )\n}\n"],"names":["StyledContainer","styled","DetailsPanelDetails","entities","isLoading","formData","mixedFields","updateFormData","clearMixedField","useEntityFormData","folderTypes","taskTypes","statuses","tags","attributes","useEntityData","folderEntities","entity","versionActivitiesData","useGetActivitiesInfiniteInfiniteQuery","e","folderHasVersions","_c","_b","_a","editableFields","readOnlyFieldsData","useEntityFields","entityType","enableEditing","updateEntity","useEntityEditing","handleChange","key","value","handleDescriptionChange","description","jsx","DescriptionSection","DetailsPanelAttributesEditor","DetailsSection"],"mappings":"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"}
+{"version":3,"file":"DetailsPanelDetails.es.js","sources":["../../../../../src/components/DetailsPanelDetails/DetailsPanelDetails.tsx"],"sourcesContent":["import {\n  DetailsPanelAttributesEditor,\n  DetailsPanelAttributesEditorProps,\n} from '../DetailsPanelAttributes/DetailsPanelAttributesEditor'\nimport type { DetailsPanelEntityData } from '@shared/api'\nimport { useGetActivitiesInfiniteInfiniteQuery } from '@shared/api'\nimport { DescriptionSection } from './DescriptionSection'\nimport { DetailsSection } from './DetailsSection'\nimport styled from 'styled-components'\nimport {\n  useEntityFormData,\n  useEntityFields,\n  useEntityEditing,\n  useEntityData,\n} from './hooks'\n\nconst StyledContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  gap: 12px;\n  overflow-y: auto;\n  padding-right: 8px;\n  padding-left: 8px;\n  margin-top: 16px;\n`\n\nexport type DetailsPanelDetailsProps = {\n  entities: DetailsPanelEntityData[]\n  isLoading: boolean\n}\n\nexport const DetailsPanelDetails = ({ entities = [], isLoading }: DetailsPanelDetailsProps) => {\n  const { formData, mixedFields, updateFormData, clearMixedField } = useEntityFormData(\n    entities,\n    isLoading,\n  )\n\n  const { folderTypes, taskTypes, statuses, tags, attributes } = useEntityData({\n    projectName: formData?.projectName,\n    isProjectNameMixed: mixedFields.includes('projectName'),\n  })\n\n  // Determine if any selected folder has published versions\n  const folderEntities = (entities || []).filter((entity) => entity.entityType === 'folder')\n  const { data: versionActivitiesData } = useGetActivitiesInfiniteInfiniteQuery(\n    {\n      entityIds: folderEntities.map((e) => e.id),\n      projectName: formData?.projectName || '',\n      referenceTypes: ['origin', 'mention', 'relation'],\n      activityTypes: ['version.publish'],\n    },\n    {\n      skip: !formData?.projectName || folderEntities.length === 0,\n    },\n  )\n\n  const folderHasVersions = Boolean(versionActivitiesData?.pages?.[0]?.activities?.length)\n\n  const { editableFields, readOnlyFieldsData } = useEntityFields({\n    attributes,\n    folderTypes,\n    taskTypes,\n    statuses,\n    tags,\n    entityType: formData?.entityType,\n    folderHasVersions,\n  })\n\n  const entityType = formData?.entityType || 'task'\n  const { enableEditing, updateEntity } = useEntityEditing({\n    entities,\n    entityType,\n  })\n\n  const handleChange: DetailsPanelAttributesEditorProps[\"onChange\"] = (key, value) => {\n    if (key === 'tags') {\n      if (Array.isArray(value)) {\n        // keep as-is\n      } else if (value === null || value === undefined || value === '') {\n        value = []\n      } else {\n        value = [String(value)]\n      }\n    }\n\n    if (key.startsWith('attrib.')) {\n      value = {\n        [key.replace('attrib.', '')]: value,\n      }\n      key = 'attrib'\n    }\n\n    updateFormData(key, value)\n    updateEntity(key, value)\n  }\n\n  const handleDescriptionChange = (description: string) => {\n    updateFormData('description', description)\n    clearMixedField('description')\n    updateEntity('attrib', { description })\n  }\n\n  return (\n    <StyledContainer>\n      <DescriptionSection\n        description={formData?.description || ''}\n        isMixed={mixedFields.includes('description')}\n        enableEditing={enableEditing}\n        onChange={handleDescriptionChange}\n        isLoading={isLoading}\n      />\n\n      <DetailsPanelAttributesEditor\n        fields={editableFields}\n        form={formData || {}}\n        mixedFields={mixedFields}\n        isLoading={isLoading}\n        enableEditing={enableEditing}\n        onChange={handleChange}\n        entities={entities}\n        entityType={entityType}\n      />\n\n      <DetailsSection\n        fields={readOnlyFieldsData}\n        form={formData || {}}\n        mixedFields={mixedFields}\n        isLoading={isLoading}\n      />\n    </StyledContainer>\n  )\n}\n"],"names":["StyledContainer","styled","DetailsPanelDetails","entities","isLoading","formData","mixedFields","updateFormData","clearMixedField","useEntityFormData","folderTypes","taskTypes","statuses","tags","attributes","useEntityData","folderEntities","entity","versionActivitiesData","useGetActivitiesInfiniteInfiniteQuery","e","folderHasVersions","_c","_b","_a","editableFields","readOnlyFieldsData","useEntityFields","entityType","enableEditing","updateEntity","useEntityEditing","handleChange","key","value","handleDescriptionChange","description","jsx","DescriptionSection","DetailsPanelAttributesEditor","DetailsSection"],"mappings":"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"}

package/dist/shared/src/components/DetailsPanelDetails/DetailsSection.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../../_virtual/jsx-runtime.cjs.js"),o=require("styled-components");require("lodash");require("react-toastify");const h=require("../../util/copyToClipboard.cjs.js");require("uuid");require("../../util/pubsub.cjs.js");const g=require("@ynput/ayon-react-components"),s=require("./BorderedSection.cjs.js"),j=require("./FieldLabel.cjs.js"),a=o.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.cjs.js"),o=require("styled-components");require("lodash");require("react-toastify");const h=require("../../util/copyToClipboard.cjs.js");require("uuid");require("../../util/pubsub.cjs.js");const j=require("@ynput/ayon-react-components"),n=require("./BorderedSection.cjs.js"),g=require("./FieldLabel.cjs.js"),f=require("date-fns"),s=o.div`
   display: grid;
   grid-template-columns: minmax(200px, 1fr) 1fr 32px;
   row-gap: 2px;
@@ -21,7 +21,7 @@
   &:hover .copy-icon {
     opacity: 1;
   }
-`,S=o.div`
+`,w=o.div`
   text-align: left;
   color: var(--md-sys-color-on-surface);
   white-space: nowrap;
@@ -30,7 +30,7 @@
   justify-self: end;
   font-size: 14px;
   width: 100%;
-`,c=o.div`
+`,a=o.div`
   height: 20px;
   background: var(--md-sys-color-surface-container-low);
   border-radius: 4px;
@@ -47,5 +47,5 @@
       opacity: 0.5;
     }
   }
-`,f=({fields:l,form:p,mixedFields:d,isLoading:u})=>{const x=(t,e)=>{if(t==null)return"-";if(e==="createdAt"||e==="updatedAt")try{return new Date(t).toLocaleString()}catch{return t.toString()}return e==="path"?t.toString():e==="entityType"?t.toString().charAt(0).toUpperCase()+t.toString().slice(1):t.toString()};return u?r.jsxRuntimeExports.jsx(s.BorderedSection,{title:"Details",withPadding:!0,children:Array.from({length:6}).map((t,e)=>r.jsxRuntimeExports.jsxs(a,{children:[r.jsxRuntimeExports.jsx(c,{style:{width:"80px"}}),r.jsxRuntimeExports.jsx(c,{style:{width:"120px",justifySelf:"end"}}),r.jsxRuntimeExports.jsx("div",{style:{width:"24px"}})]},e))}):r.jsxRuntimeExports.jsx(s.BorderedSection,{title:"Details",autoHeight:!0,showHeader:!0,withPadding:!0,children:l.filter(t=>!t.hidden).map(t=>{const e=p[t.name],i=d.includes(t.name),n=i?"Multiple values":x(e,t.name);return r.jsxRuntimeExports.jsxs(a,{children:[r.jsxRuntimeExports.jsx(j.FieldLabel,{name:t.name,data:t.data,showDetailedTooltip:!0}),r.jsxRuntimeExports.jsx(S,{title:n,style:{color:i?"var(--md-sys-color-on-surface-variant)":"var(--md-sys-color-on-surface)",fontStyle:i?"italic":"normal"},children:n}),r.jsxRuntimeExports.jsx(g.Button,{className:"copy-icon",variant:"text",icon:"content_copy",onClick:m=>{m.stopPropagation();const y=e??"";h.copyToClipboard(y.toString(),!0)}})]},t.name)})})};exports.DetailsSection=f;
+`,v=({fields:c,form:l,mixedFields:d=[],isLoading:p})=>{const u=(t,r)=>{if(t==null)return"-";if(r==="createdAt"||r==="updatedAt")try{return f.format(new Date(t),"PPpp")}catch{return t.toString()}return t.toString()};return p?e.jsxRuntimeExports.jsx(n.BorderedSection,{title:"Details",withPadding:!0,children:Array.from({length:6}).map((t,r)=>e.jsxRuntimeExports.jsxs(s,{children:[e.jsxRuntimeExports.jsx(a,{style:{width:"80px"}}),e.jsxRuntimeExports.jsx(a,{style:{width:"120px",justifySelf:"end"}}),e.jsxRuntimeExports.jsx("div",{style:{width:"24px"}})]},r))}):e.jsxRuntimeExports.jsx(n.BorderedSection,{title:"Details",autoHeight:!0,showHeader:!0,withPadding:!0,children:c.filter(t=>!t.hidden).map(t=>{const r=l[t.name],i=d.includes(t.name),x=i?"Multiple values":u(r,t.name);return e.jsxRuntimeExports.jsxs(s,{children:[e.jsxRuntimeExports.jsx(g.FieldLabel,{name:t.name,data:t.data,showDetailedTooltip:!0}),e.jsxRuntimeExports.jsx(w,{style:{color:i?"var(--md-sys-color-on-surface-variant)":"var(--md-sys-color-on-surface)",fontStyle:i?"italic":"normal"},children:x}),e.jsxRuntimeExports.jsx(j.Button,{className:"copy-icon",variant:"text",icon:"content_copy",onClick:m=>{m.stopPropagation();const y=r??"";h.copyToClipboard(y.toString(),!0)}})]},t.name)})})};exports.DetailsSection=v;
 //# sourceMappingURL=DetailsSection.cjs.js.map

package/dist/shared/src/components/DetailsPanelDetails/DetailsSection.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsSection.cjs.js","sources":["../../../../../src/components/DetailsPanelDetails/DetailsSection.tsx"],"sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\nimport { AttributeField } from '@shared/components'\nimport { copyToClipboard } from '@shared/util'\nimport { Button } from '@ynput/ayon-react-components'\nimport { BorderedSection } from './BorderedSection'\nimport { FieldLabel } from './FieldLabel'\n\nconst StyledRow = styled.div`\n  display: grid;\n  grid-template-columns: minmax(200px, 1fr) 1fr 32px;\n  row-gap: 2px;\n  column-gap: 4px;\n  align-items: center;\n  min-height: 32px;\n  position: relative;\n\n  .copy-icon {\n    opacity: 0;\n    width: 32px;\n    height: 32px;\n    padding: 2px;\n\n    &:hover {\n      background-color: transparent !important;\n    }\n  }\n\n  &:hover .copy-icon {\n    opacity: 1;\n  }\n`\n\nconst StyledValue = styled.div`\n  text-align: left;\n  color: var(--md-sys-color-on-surface);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  justify-self: end;\n  font-size: 14px;\n  width: 100%;\n`\n\nconst StyledShimmer = styled.div`\n  height: 20px;\n  background: var(--md-sys-color-surface-container-low);\n  border-radius: 4px;\n  animation: shimmer 1.5s infinite;\n\n  @keyframes shimmer {\n    0% {\n      opacity: 0.5;\n    }\n    50% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0.5;\n    }\n  }\n`\n\ninterface DetailsSectionProps {\n  fields: AttributeField[]\n  form: Record<string, any>\n  mixedFields: string[]\n  isLoading: boolean\n}\n\nexport const DetailsSection: React.FC<DetailsSectionProps> = ({\n  fields,\n  form,\n  mixedFields,\n  isLoading,\n}) => {\n  const formatValue = (value: any, fieldName: string): string => {\n    if (value === null || value === undefined) {\n      return '-'\n    }\n\n    if (fieldName === 'createdAt' || fieldName === 'updatedAt') {\n      try {\n        return new Date(value).toLocaleString()\n      } catch {\n        return value.toString()\n      }\n    }\n\n    if (fieldName === 'path') {\n      return value.toString()\n    }\n\n    if (fieldName === 'entityType') {\n      return value.toString().charAt(0).toUpperCase() + value.toString().slice(1)\n    }\n\n    return value.toString()\n  }\n\n  if (isLoading) {\n    return (\n      <BorderedSection title=\"Details\" withPadding>\n        {Array.from({ length: 6 }).map((_, index) => (\n          <StyledRow key={index}>\n            <StyledShimmer style={{ width: '80px' }} />\n            <StyledShimmer style={{ width: '120px', justifySelf: 'end' }} />\n            <div style={{ width: '24px' }} />\n          </StyledRow>\n        ))}\n      </BorderedSection>\n    )\n  }\n\n  return (\n    <BorderedSection title=\"Details\" autoHeight showHeader withPadding>\n      {fields\n        .filter((field) => !field.hidden)\n        .map((field) => {\n          const fieldValue = form[field.name]\n          const isMixed = mixedFields.includes(field.name)\n          const displayValue = isMixed ? 'Multiple values' : formatValue(fieldValue, field.name)\n\n          return (\n            <StyledRow key={field.name}>\n              <FieldLabel name={field.name} data={field.data} showDetailedTooltip={true} />\n              <StyledValue\n                title={displayValue}\n                style={{\n                  color: isMixed\n                    ? 'var(--md-sys-color-on-surface-variant)'\n                    : 'var(--md-sys-color-on-surface)',\n                  fontStyle: isMixed ? 'italic' : 'normal',\n                }}\n              >\n                {displayValue}\n              </StyledValue>\n              <Button\n                className=\"copy-icon\"\n                variant=\"text\"\n                icon=\"content_copy\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  const valueToDisplay =\n                    fieldValue === null || fieldValue === undefined ? '' : fieldValue\n                  copyToClipboard(valueToDisplay.toString(), true)\n                }}\n              />\n            </StyledRow>\n          )\n        })}\n    </BorderedSection>\n  )\n}\n"],"names":["StyledRow","styled","StyledValue","StyledShimmer","DetailsSection","fields","form","mixedFields","isLoading","formatValue","value","fieldName","BorderedSection","_","index","jsx","field","fieldValue","isMixed","displayValue","FieldLabel","Button","e","valueToDisplay","copyToClipboard"],"mappings":"sbAQMA,EAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyBnBC,EAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWrBE,EAAgBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0BhBG,EAAgD,CAAC,CAC5D,OAAAC,EACA,KAAAC,EACA,YAAAC,EACA,UAAAC,CACF,IAAM,CACE,MAAAC,EAAc,CAACC,EAAYC,IAA8B,CACzD,GAAAD,GAAU,KACL,MAAA,IAGL,GAAAC,IAAc,aAAeA,IAAc,YACzC,GAAA,CACF,OAAO,IAAI,KAAKD,CAAK,EAAE,eAAe,CAAA,MAChC,CACN,OAAOA,EAAM,SAAS,CAAA,CAI1B,OAAIC,IAAc,OACTD,EAAM,SAAS,EAGpBC,IAAc,aACTD,EAAM,WAAW,OAAO,CAAC,EAAE,YAAY,EAAIA,EAAM,WAAW,MAAM,CAAC,EAGrEA,EAAM,SAAS,CACxB,EAEA,OAAIF,0BAECI,kBAAgB,CAAA,MAAM,UAAU,YAAW,GACzC,eAAM,KAAK,CAAE,OAAQ,CAAA,CAAG,EAAE,IAAI,CAACC,EAAGC,6BAChCd,EACC,CAAA,SAAA,CAAAe,EAAA,kBAAA,IAACZ,EAAc,CAAA,MAAO,CAAE,MAAO,QAAU,EACzCY,wBAACZ,GAAc,MAAO,CAAE,MAAO,QAAS,YAAa,OAAS,0BAC7D,MAAI,CAAA,MAAO,CAAE,MAAO,OAAU,CAAA,CAAA,GAHjBW,CAIhB,CACD,EACH,EAKFC,EAAA,kBAAA,IAACH,mBAAgB,MAAM,UAAU,WAAU,GAAC,WAAU,GAAC,YAAW,GAC/D,WACE,OAAQI,GAAU,CAACA,EAAM,MAAM,EAC/B,IAAKA,GAAU,CACR,MAAAC,EAAaX,EAAKU,EAAM,IAAI,EAC5BE,EAAUX,EAAY,SAASS,EAAM,IAAI,EACzCG,EAAeD,EAAU,kBAAoBT,EAAYQ,EAAYD,EAAM,IAAI,EAErF,gCACGhB,EACC,CAAA,SAAA,CAACe,EAAAA,kBAAAA,IAAAK,EAAA,WAAA,CAAW,KAAMJ,EAAM,KAAM,KAAMA,EAAM,KAAM,oBAAqB,EAAM,CAAA,EAC3ED,EAAA,kBAAA,IAACb,EAAA,CACC,MAAOiB,EACP,MAAO,CACL,MAAOD,EACH,yCACA,iCACJ,UAAWA,EAAU,SAAW,QAClC,EAEC,SAAAC,CAAA,CACH,EACAJ,EAAA,kBAAA,IAACM,EAAA,OAAA,CACC,UAAU,YACV,QAAQ,OACR,KAAK,eACL,QAAUC,GAAM,CACdA,EAAE,gBAAgB,EAClB,MAAMC,EACJN,GAAkD,GACpCO,EAAAA,gBAAAD,EAAe,SAAS,EAAG,EAAI,CAAA,CACjD,CAAA,CACF,CAAA,EAvBcP,EAAM,IAwBtB,CAEH,CAAA,EACL,CAEJ"}
+{"version":3,"file":"DetailsSection.cjs.js","sources":["../../../../../src/components/DetailsPanelDetails/DetailsSection.tsx"],"sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\nimport { AttributeField } from '@shared/components'\nimport { copyToClipboard } from '@shared/util'\nimport { Button } from '@ynput/ayon-react-components'\nimport { BorderedSection } from './BorderedSection'\nimport { FieldLabel } from './FieldLabel'\nimport { format } from 'date-fns'\n\nconst StyledRow = styled.div`\n  display: grid;\n  grid-template-columns: minmax(200px, 1fr) 1fr 32px;\n  row-gap: 2px;\n  column-gap: 4px;\n  align-items: center;\n  min-height: 32px;\n  position: relative;\n\n  .copy-icon {\n    opacity: 0;\n    width: 32px;\n    height: 32px;\n    padding: 2px;\n\n    &:hover {\n      background-color: transparent !important;\n    }\n  }\n\n  &:hover .copy-icon {\n    opacity: 1;\n  }\n`\n\nconst StyledValue = styled.div`\n  text-align: left;\n  color: var(--md-sys-color-on-surface);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  justify-self: end;\n  font-size: 14px;\n  width: 100%;\n`\n\nconst StyledShimmer = styled.div`\n  height: 20px;\n  background: var(--md-sys-color-surface-container-low);\n  border-radius: 4px;\n  animation: shimmer 1.5s infinite;\n\n  @keyframes shimmer {\n    0% {\n      opacity: 0.5;\n    }\n    50% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0.5;\n    }\n  }\n`\n\ntype DetailsField = Pick<AttributeField, 'name' | 'data' | 'hidden'>\n\ninterface DetailsSectionProps {\n  fields: DetailsField[]\n  form: Record<string, any>\n  mixedFields?: string[]\n  isLoading: boolean\n}\n\nexport const DetailsSection: React.FC<DetailsSectionProps> = ({\n  fields,\n  form,\n  mixedFields = [],\n  isLoading,\n}) => {\n  const formatValue = (value: any, fieldName: string): string => {\n    if (value === null || value === undefined) {\n      return '-'\n    }\n\n    if (fieldName === 'createdAt' || fieldName === 'updatedAt') {\n      try {\n        return format(new Date(value), 'PPpp')\n      } catch {\n        return value.toString()\n      }\n    }\n\n    return value.toString()\n  }\n\n  if (isLoading) {\n    return (\n      <BorderedSection title=\"Details\" withPadding>\n        {Array.from({ length: 6 }).map((_, index) => (\n          <StyledRow key={index}>\n            <StyledShimmer style={{ width: '80px' }} />\n            <StyledShimmer style={{ width: '120px', justifySelf: 'end' }} />\n            <div style={{ width: '24px' }} />\n          </StyledRow>\n        ))}\n      </BorderedSection>\n    )\n  }\n\n  return (\n    <BorderedSection title=\"Details\" autoHeight showHeader withPadding>\n      {fields\n        .filter((field) => !field.hidden)\n        .map((field) => {\n          const fieldValue = form[field.name]\n          const isMixed = mixedFields.includes(field.name)\n          const displayValue = isMixed ? 'Multiple values' : formatValue(fieldValue, field.name)\n\n          return (\n            <StyledRow key={field.name}>\n              <FieldLabel name={field.name} data={field.data} showDetailedTooltip={true} />\n              <StyledValue\n                style={{\n                  color: isMixed\n                    ? 'var(--md-sys-color-on-surface-variant)'\n                    : 'var(--md-sys-color-on-surface)',\n                  fontStyle: isMixed ? 'italic' : 'normal',\n                }}\n              >\n                {displayValue}\n              </StyledValue>\n              <Button\n                className=\"copy-icon\"\n                variant=\"text\"\n                icon=\"content_copy\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  const valueToDisplay =\n                    fieldValue === null || fieldValue === undefined ? '' : fieldValue\n                  copyToClipboard(valueToDisplay.toString(), true)\n                }}\n              />\n            </StyledRow>\n          )\n        })}\n    </BorderedSection>\n  )\n}\n"],"names":["StyledRow","styled","StyledValue","StyledShimmer","DetailsSection","fields","form","mixedFields","isLoading","formatValue","value","fieldName","format","BorderedSection","_","index","jsx","field","fieldValue","isMixed","displayValue","FieldLabel","Button","e","valueToDisplay","copyToClipboard"],"mappings":"4cASMA,EAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyBnBC,EAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWrBE,EAAgBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4BhBG,EAAgD,CAAC,CAC5D,OAAAC,EACA,KAAAC,EACA,YAAAC,EAAc,CAAC,EACf,UAAAC,CACF,IAAM,CACE,MAAAC,EAAc,CAACC,EAAYC,IAA8B,CACzD,GAAAD,GAAU,KACL,MAAA,IAGL,GAAAC,IAAc,aAAeA,IAAc,YACzC,GAAA,CACF,OAAOC,EAAO,OAAA,IAAI,KAAKF,CAAK,EAAG,MAAM,CAAA,MAC/B,CACN,OAAOA,EAAM,SAAS,CAAA,CAI1B,OAAOA,EAAM,SAAS,CACxB,EAEA,OAAIF,0BAECK,kBAAgB,CAAA,MAAM,UAAU,YAAW,GACzC,eAAM,KAAK,CAAE,OAAQ,CAAA,CAAG,EAAE,IAAI,CAACC,EAAGC,6BAChCf,EACC,CAAA,SAAA,CAAAgB,EAAA,kBAAA,IAACb,EAAc,CAAA,MAAO,CAAE,MAAO,QAAU,EACzCa,wBAACb,GAAc,MAAO,CAAE,MAAO,QAAS,YAAa,OAAS,0BAC7D,MAAI,CAAA,MAAO,CAAE,MAAO,OAAU,CAAA,CAAA,GAHjBY,CAIhB,CACD,EACH,EAKFC,EAAA,kBAAA,IAACH,mBAAgB,MAAM,UAAU,WAAU,GAAC,WAAU,GAAC,YAAW,GAC/D,WACE,OAAQI,GAAU,CAACA,EAAM,MAAM,EAC/B,IAAKA,GAAU,CACR,MAAAC,EAAaZ,EAAKW,EAAM,IAAI,EAC5BE,EAAUZ,EAAY,SAASU,EAAM,IAAI,EACzCG,EAAeD,EAAU,kBAAoBV,EAAYS,EAAYD,EAAM,IAAI,EAErF,gCACGjB,EACC,CAAA,SAAA,CAACgB,EAAAA,kBAAAA,IAAAK,EAAA,WAAA,CAAW,KAAMJ,EAAM,KAAM,KAAMA,EAAM,KAAM,oBAAqB,EAAM,CAAA,EAC3ED,EAAA,kBAAA,IAACd,EAAA,CACC,MAAO,CACL,MAAOiB,EACH,yCACA,iCACJ,UAAWA,EAAU,SAAW,QAClC,EAEC,SAAAC,CAAA,CACH,EACAJ,EAAA,kBAAA,IAACM,EAAA,OAAA,CACC,UAAU,YACV,QAAQ,OACR,KAAK,eACL,QAAUC,GAAM,CACdA,EAAE,gBAAgB,EAClB,MAAMC,EACJN,GAAkD,GACpCO,EAAAA,gBAAAD,EAAe,SAAS,EAAG,EAAI,CAAA,CACjD,CAAA,CACF,CAAA,EAtBcP,EAAM,IAuBtB,CAEH,CAAA,EACL,CAEJ"}

package/dist/shared/src/components/DetailsPanelDetails/DetailsSection.es.js

@@ -1,14 +1,15 @@
-import { j as r } from "../../../../_virtual/jsx-runtime.es.js";
+import { j as o } from "../../../../_virtual/jsx-runtime.es.js";
 import e from "styled-components";
 import "lodash";
 import "react-toastify";
-import { copyToClipboard as h } from "../../util/copyToClipboard.es.js";
+import { copyToClipboard as y } from "../../util/copyToClipboard.es.js";
 import "uuid";
 import "../../util/pubsub.es.js";
-import { Button as x } from "@ynput/ayon-react-components";
-import { BorderedSection as a } from "./BorderedSection.es.js";
+import { Button as h } from "@ynput/ayon-react-components";
+import { BorderedSection as n } from "./BorderedSection.es.js";
 import { FieldLabel as f } from "./FieldLabel.es.js";
-const s = e.div`
+import { format as g } from "date-fns";
+const a = e.div`
   display: grid;
   grid-template-columns: minmax(200px, 1fr) 1fr 32px;
   row-gap: 2px;
@@ -31,7 +32,7 @@ const s = e.div`
   &:hover .copy-icon {
     opacity: 1;
   }
-`, g = e.div`
+`, w = e.div`
   text-align: left;
   color: var(--md-sys-color-on-surface);
   white-space: nowrap;
@@ -40,7 +41,7 @@ const s = e.div`
   justify-self: end;
   font-size: 14px;
   width: 100%;
-`, p = e.div`
+`, s = e.div`
   height: 20px;
   background: var(--md-sys-color-surface-container-low);
   border-radius: 4px;
@@ -57,50 +58,49 @@ const s = e.div`
       opacity: 0.5;
     }
   }
-`, P = ({
-  fields: c,
+`, H = ({
+  fields: p,
   form: l,
-  mixedFields: d,
-  isLoading: m
+  mixedFields: c = [],
+  isLoading: d
 }) => {
-  const u = (t, o) => {
+  const m = (t, r) => {
     if (t == null)
       return "-";
-    if (o === "createdAt" || o === "updatedAt")
+    if (r === "createdAt" || r === "updatedAt")
       try {
-        return new Date(t).toLocaleString();
+        return g(new Date(t), "PPpp");
       } catch {
         return t.toString();
       }
-    return o === "path" ? t.toString() : o === "entityType" ? t.toString().charAt(0).toUpperCase() + t.toString().slice(1) : t.toString();
+    return t.toString();
   };
-  return m ? /* @__PURE__ */ r.jsx(a, { title: "Details", withPadding: !0, children: Array.from({ length: 6 }).map((t, o) => /* @__PURE__ */ r.jsxs(s, { children: [
-    /* @__PURE__ */ r.jsx(p, { style: { width: "80px" } }),
-    /* @__PURE__ */ r.jsx(p, { style: { width: "120px", justifySelf: "end" } }),
-    /* @__PURE__ */ r.jsx("div", { style: { width: "24px" } })
-  ] }, o)) }) : /* @__PURE__ */ r.jsx(a, { title: "Details", autoHeight: !0, showHeader: !0, withPadding: !0, children: c.filter((t) => !t.hidden).map((t) => {
-    const o = l[t.name], i = d.includes(t.name), n = i ? "Multiple values" : u(o, t.name);
-    return /* @__PURE__ */ r.jsxs(s, { children: [
-      /* @__PURE__ */ r.jsx(f, { name: t.name, data: t.data, showDetailedTooltip: !0 }),
-      /* @__PURE__ */ r.jsx(
-        g,
+  return d ? /* @__PURE__ */ o.jsx(n, { title: "Details", withPadding: !0, children: Array.from({ length: 6 }).map((t, r) => /* @__PURE__ */ o.jsxs(a, { children: [
+    /* @__PURE__ */ o.jsx(s, { style: { width: "80px" } }),
+    /* @__PURE__ */ o.jsx(s, { style: { width: "120px", justifySelf: "end" } }),
+    /* @__PURE__ */ o.jsx("div", { style: { width: "24px" } })
+  ] }, r)) }) : /* @__PURE__ */ o.jsx(n, { title: "Details", autoHeight: !0, showHeader: !0, withPadding: !0, children: p.filter((t) => !t.hidden).map((t) => {
+    const r = l[t.name], i = c.includes(t.name), u = i ? "Multiple values" : m(r, t.name);
+    return /* @__PURE__ */ o.jsxs(a, { children: [
+      /* @__PURE__ */ o.jsx(f, { name: t.name, data: t.data, showDetailedTooltip: !0 }),
+      /* @__PURE__ */ o.jsx(
+        w,
         {
-          title: n,
           style: {
             color: i ? "var(--md-sys-color-on-surface-variant)" : "var(--md-sys-color-on-surface)",
             fontStyle: i ? "italic" : "normal"
           },
-          children: n
+          children: u
         }
       ),
-      /* @__PURE__ */ r.jsx(
-        x,
+      /* @__PURE__ */ o.jsx(
+        h,
         {
           className: "copy-icon",
           variant: "text",
           icon: "content_copy",
-          onClick: (y) => {
-            y.stopPropagation(), h((o ?? "").toString(), !0);
+          onClick: (x) => {
+            x.stopPropagation(), y((r ?? "").toString(), !0);
           }
         }
       )
@@ -108,6 +108,6 @@ const s = e.div`
   }) });
 };
 export {
-  P as DetailsSection
+  H as DetailsSection
 };
 //# sourceMappingURL=DetailsSection.es.js.map