@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/components/assets/asset-library/layout/assetLibraryLayout.ts

@@ -1,201 +1,201 @@
-import { styled } from 'styled-components'
-
-export const StyledAssetLibraryLayout = styled.div<{ $fill?: boolean }>`
-  display: grid;
-  grid-template-columns: ${({ $fill }) =>
-    $fill
-      ? 'minmax(340px, 400px) minmax(0, 1fr)'
-      : 'minmax(248px, 320px) minmax(0, 1fr)'};
-  width: 100%;
-  height: 100%;
-  max-height: ${({ $fill }) =>
-    $fill ? 'none' : 'min(620px, calc(100dvh - 190px))'};
-  min-height: 0;
-  min-width: 0;
-  overflow: hidden;
-
-  @media (max-width: 760px) {
-    grid-template-columns: minmax(0, 1fr);
-  }
-`
-
-export const StyledAssetLibrarySidebar = styled.aside`
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  min-width: 0;
-  border-right: 1px solid rgb(from var(--platform-colors-border) r g b / 0.72);
-  background: var(--platform-colors-surface);
-
-  @media (max-width: 760px) {
-    border-right: 0;
-    border-bottom: 1px solid var(--platform-colors-border);
-  }
-`
-
-export const StyledAssetLibraryDetail = styled.div`
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
-  min-height: 0;
-  min-width: 0;
-  background: var(--platform-colors-app-viewport, var(--platform-colors-bg));
-
-  @media (max-width: 760px) {
-    grid-template-columns: minmax(0, 1fr);
-    min-height: 320px;
-  }
-`
-
-export const StyledAssetLibraryDetailEmpty = styled.div`
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  min-height: 0;
-  padding: var(--platform-spacing-lg);
-  text-align: center;
-`
-
-export const StyledAssetLibraryDetailMain = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-height: 0;
-  min-width: 0;
-  overflow: hidden;
-`
-
-export const StyledAssetLibraryDetailPanels = styled.div<{ $columns: number }>`
-  display: flex;
-  flex-direction: column;
-  gap: var(--platform-spacing-sm);
-  min-height: 0;
-  overflow: auto;
-  padding: var(--platform-spacing-md) 0 0;
-`
-
-export const StyledAssetLibrarySidePanel = styled.section`
-  display: flex;
-  flex-direction: column;
-  gap: var(--platform-spacing-sm);
-  min-width: 0;
-  padding: var(--platform-spacing-sm) 0;
-  border-top: 1px solid rgb(from var(--platform-colors-border) r g b / 0.7);
-`
-
-export const StyledAssetLibrarySidePanelHeading = styled.h3`
-  margin: 0;
-  font-size: var(--platform-typography-font-size-xs);
-  font-weight: var(--platform-typography-font-weight-bold);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--platform-colors-text-secondary);
-`
-
-export const StyledAssetLibrarySidePanelEmpty = styled.p`
-  margin: 0;
-  font-size: var(--platform-typography-font-size-sm);
-  color: var(--platform-colors-text-secondary);
-`
-
-export const StyledAssetLibraryUsageList = styled.ul`
-  display: flex;
-  flex-direction: column;
-  gap: var(--platform-spacing-sm);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-`
-
-export const StyledAssetLibraryUsageItem = styled.li`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-`
-
-export const StyledAssetLibraryUsageTitle = styled.span`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: var(--platform-typography-font-size-sm);
-  font-weight: var(--platform-typography-font-weight-medium);
-  color: var(--platform-colors-text);
-`
-
-export const StyledAssetLibraryUsagePath = styled.span`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: var(--platform-typography-font-size-xs);
-  color: var(--platform-colors-text-secondary);
-`
-
-export const StyledAssetLibraryVersionList = styled.ul`
-  display: flex;
-  flex-direction: column;
-  gap: var(--platform-spacing-sm);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-`
-
-export const StyledAssetLibraryVersionItem = styled.li`
-  display: flex;
-  flex-direction: column;
-  gap: var(--platform-spacing-xs);
-  padding-bottom: var(--platform-spacing-sm);
-  border-bottom: 1px solid var(--platform-colors-border);
-
-  &:last-child {
-    padding-bottom: 0;
-    border-bottom: 0;
-  }
-`
-
-export const StyledAssetLibraryVersionMeta = styled.div`
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--platform-spacing-sm);
-  min-width: 0;
-`
-
-export const StyledAssetLibraryVersionTitle = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-`
-
-export const StyledAssetLibraryVersionLabel = styled.span`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: var(--platform-typography-font-size-sm);
-  font-weight: var(--platform-typography-font-weight-medium);
-  color: var(--platform-colors-text);
-`
-
-export const StyledAssetLibraryVersionSub = styled.span`
-  font-size: var(--platform-typography-font-size-xs);
-  color: var(--platform-colors-text-secondary);
-`
-
-export const StyledAssetLibraryVersionBadge = styled.span`
-  flex-shrink: 0;
-  font-size: var(--platform-typography-font-size-xs);
-  color: var(--platform-colors-text-secondary);
-`
-
-export const StyledAssetLibraryVersionPrompt = styled.p`
-  margin: 0;
-  font-size: var(--platform-typography-font-size-xs);
-  color: var(--platform-colors-text-secondary);
-`
-
-export const StyledAssetLibraryVersionActions = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--platform-spacing-xs);
-`
+import { styled } from 'styled-components'
+
+export const StyledAssetLibraryLayout = styled.div<{ $fill?: boolean }>`
+  display: grid;
+  grid-template-columns: ${({ $fill }) =>
+    $fill
+      ? 'minmax(340px, 400px) minmax(0, 1fr)'
+      : 'minmax(248px, 320px) minmax(0, 1fr)'};
+  width: 100%;
+  height: 100%;
+  max-height: ${({ $fill }) =>
+    $fill ? 'none' : 'min(620px, calc(100dvh - 190px))'};
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+
+  @media (max-width: 760px) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+`
+
+export const StyledAssetLibrarySidebar = styled.aside`
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  border-right: 1px solid rgb(from var(--platform-colors-border) r g b / 0.72);
+  background: var(--platform-colors-surface);
+
+  @media (max-width: 760px) {
+    border-right: 0;
+    border-bottom: 1px solid var(--platform-colors-border);
+  }
+`
+
+export const StyledAssetLibraryDetail = styled.div`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
+  min-height: 0;
+  min-width: 0;
+  background: var(--platform-colors-app-viewport, var(--platform-colors-bg));
+
+  @media (max-width: 760px) {
+    grid-template-columns: minmax(0, 1fr);
+    min-height: 320px;
+  }
+`
+
+export const StyledAssetLibraryDetailEmpty = styled.div`
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  padding: var(--platform-spacing-lg);
+  text-align: center;
+`
+
+export const StyledAssetLibraryDetailMain = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+`
+
+export const StyledAssetLibraryDetailPanels = styled.div<{ $columns: number }>`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-sm);
+  min-height: 0;
+  overflow: auto;
+  padding: var(--platform-spacing-md) 0 0;
+`
+
+export const StyledAssetLibrarySidePanel = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-sm);
+  min-width: 0;
+  padding: var(--platform-spacing-sm) 0;
+  border-top: 1px solid rgb(from var(--platform-colors-border) r g b / 0.7);
+`
+
+export const StyledAssetLibrarySidePanelHeading = styled.h3`
+  margin: 0;
+  font-size: var(--platform-typography-font-size-xs);
+  font-weight: var(--platform-typography-font-weight-bold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--platform-colors-text-secondary);
+`
+
+export const StyledAssetLibrarySidePanelEmpty = styled.p`
+  margin: 0;
+  font-size: var(--platform-typography-font-size-sm);
+  color: var(--platform-colors-text-secondary);
+`
+
+export const StyledAssetLibraryUsageList = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-sm);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`
+
+export const StyledAssetLibraryUsageItem = styled.li`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+`
+
+export const StyledAssetLibraryUsageTitle = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--platform-typography-font-size-sm);
+  font-weight: var(--platform-typography-font-weight-medium);
+  color: var(--platform-colors-text);
+`
+
+export const StyledAssetLibraryUsagePath = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--platform-typography-font-size-xs);
+  color: var(--platform-colors-text-secondary);
+`
+
+export const StyledAssetLibraryVersionList = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-sm);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`
+
+export const StyledAssetLibraryVersionItem = styled.li`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-xs);
+  padding-bottom: var(--platform-spacing-sm);
+  border-bottom: 1px solid var(--platform-colors-border);
+
+  &:last-child {
+    padding-bottom: 0;
+    border-bottom: 0;
+  }
+`
+
+export const StyledAssetLibraryVersionMeta = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--platform-spacing-sm);
+  min-width: 0;
+`
+
+export const StyledAssetLibraryVersionTitle = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+`
+
+export const StyledAssetLibraryVersionLabel = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--platform-typography-font-size-sm);
+  font-weight: var(--platform-typography-font-weight-medium);
+  color: var(--platform-colors-text);
+`
+
+export const StyledAssetLibraryVersionSub = styled.span`
+  font-size: var(--platform-typography-font-size-xs);
+  color: var(--platform-colors-text-secondary);
+`
+
+export const StyledAssetLibraryVersionBadge = styled.span`
+  flex-shrink: 0;
+  font-size: var(--platform-typography-font-size-xs);
+  color: var(--platform-colors-text-secondary);
+`
+
+export const StyledAssetLibraryVersionPrompt = styled.p`
+  margin: 0;
+  font-size: var(--platform-typography-font-size-xs);
+  color: var(--platform-colors-text-secondary);
+`
+
+export const StyledAssetLibraryVersionActions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--platform-spacing-xs);
+`

package/src/components/assets/asset-library/shared/fieldStyles.ts

@@ -1,62 +1,62 @@
-import { styled } from 'styled-components'
-
-/** Shared field chrome — swap for platform form controls later. */
-export const StyledAssetLibraryFieldShell = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 14px 0;
-  border-bottom: 1px solid var(--platform-colors-border);
-
-  label span {
-    font-size: var(--platform-typography-font-size-xs, 12px);
-  }
-
-  input,
-  textarea {
-    font-size: var(--platform-typography-font-size-sm, 13px);
-  }
-
-  textarea {
-    min-height: 86px;
-  }
-`
-
-export const StyledAssetLibraryField = styled.label`
-  display: flex;
-  flex-direction: column;
-  gap: var(--platform-spacing-xs);
-  font-size: var(--platform-typography-font-size-xs);
-  color: var(--platform-colors-text-secondary);
-
-  input,
-  textarea {
-    min-height: 30px;
-    padding: var(--platform-spacing-xs) var(--platform-spacing-sm);
-    border: 1px solid var(--platform-colors-border);
-    background: var(--platform-colors-background);
-    color: var(--platform-colors-text);
-    font: inherit;
-    font-size: var(--platform-typography-font-size-sm);
-    border-radius: 0;
-
-    &:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-  }
-
-  textarea {
-    min-height: 64px;
-    resize: vertical;
-  }
-`
-
-export const StyledAssetLibrarySourceField = styled(StyledAssetLibraryField)`
-  textarea {
-    min-height: 160px;
-    font-family: var(--platform-typography-font-family-mono);
-    line-height: var(--platform-typography-line-height-base);
-    resize: vertical;
-  }
-`
+import { styled } from 'styled-components'
+
+/** Shared field chrome — swap for platform form controls later. */
+export const StyledAssetLibraryFieldShell = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--platform-colors-border);
+
+  label span {
+    font-size: var(--platform-typography-font-size-xs, 12px);
+  }
+
+  input,
+  textarea {
+    font-size: var(--platform-typography-font-size-sm, 13px);
+  }
+
+  textarea {
+    min-height: 86px;
+  }
+`
+
+export const StyledAssetLibraryField = styled.label`
+  display: flex;
+  flex-direction: column;
+  gap: var(--platform-spacing-xs);
+  font-size: var(--platform-typography-font-size-xs);
+  color: var(--platform-colors-text-secondary);
+
+  input,
+  textarea {
+    min-height: 30px;
+    padding: var(--platform-spacing-xs) var(--platform-spacing-sm);
+    border: 1px solid var(--platform-colors-border);
+    background: var(--platform-colors-background);
+    color: var(--platform-colors-text);
+    font: inherit;
+    font-size: var(--platform-typography-font-size-sm);
+    border-radius: 0;
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+
+  textarea {
+    min-height: 64px;
+    resize: vertical;
+  }
+`
+
+export const StyledAssetLibrarySourceField = styled(StyledAssetLibraryField)`
+  textarea {
+    min-height: 160px;
+    font-family: var(--platform-typography-font-family-mono);
+    line-height: var(--platform-typography-line-height-base);
+    resize: vertical;
+  }
+`