@flytedan/flytebot-design-system 0.12.14 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.12.14",
+  "version": "0.13.0",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",

package/styles/components.css

@@ -2252,7 +2252,16 @@
   padding: 0 var(--gutter-lg);
   position: relative;
 }
+/* MP-141: the breadcrumb is the Topbar's only elastic item. Every other direct child
+   (overflowActions, actions — the version badge, the account trigger, any icon button)
+   keeps its content width at any viewport: it never shrinks below what its own content
+   needs. The crumb absorbs whatever space that leaves, growing to fill the row (so no
+   separate spacer element is needed) and shrinking first when the row is tight. */
+.fd-topbar > *:not(.fd-crumb) {
+  flex-shrink: 0;
+}
 .fd-crumb {
+  flex: 1 1 auto;
   display: flex;
   align-items: center;
   gap: 9px;
@@ -2266,7 +2275,15 @@
 .fd-crumb a:hover {
   color: var(--text);
 }
+/* The current crumb already exposes its full text via `truncationTitle` (Topbar.tsx),
+   so it may ellipsize at any width, not only `.is-narrow` — the same rule that used to
+   apply only in the collapsed layout now applies everywhere the row runs out of room. */
 .fd-crumb-current {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: var(--text);
   font-weight: var(--w-semibold);
 }
@@ -2314,23 +2331,12 @@
 }
 /* Narrow Topbar (`is-narrow`, set by Topbar from its own `overflowBreakpoint`, so the
    crumb rules and the overflow menu always switch together): earlier crumbs hide (the
-   nav drawer `onMenu` opens still reaches them), and the current crumb truncates with
-   an ellipsis instead of spilling its text outside a zero-width box.
-   The crumb also grows (`flex: 1 1 auto`) so it, not the row spacer, takes the width
-   the collapsed controls free. */
-.fd-topbar.is-narrow .fd-crumb {
-  flex: 1 1 auto;
-}
+   nav drawer `onMenu` opens still reaches them). The crumb's grow/shrink and the current
+   crumb's ellipsis are the base `.fd-crumb`/`.fd-crumb-current` rules above — they apply
+   at every width, not only here. */
 .fd-topbar.is-narrow .fd-crumb > *:not(:last-child) {
   display: none;
 }
-.fd-topbar.is-narrow .fd-crumb-current {
-  display: block;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
 /* ============ Overlays ============ */
 /* z-index is set inline by Modal.tsx/Drawer.tsx via useOverlayLayer (see Popover.tsx). */
@@ -6808,3 +6814,237 @@ button.fd-erow-metric:focus-visible {
     display: none;
   }
 }
+
+/* FileBrowser (MP-135): a folder tree pane plus the current folder's contents — folders
+   and files together, create/rename/move by drag or by an equally real keyboard menu.
+   Two regions, one scroll region each (R-8): the head/breadcrumb bar never scrolls, the
+   tree and the main pane each own their own overflow. Side by side while there's room —
+   below a narrow width of the component's OWN box (a container query, same reasoning as
+   `.fd-fv` above) the tree pane disappears entirely: there is nothing to switch to, since
+   the current folder's own subfolders already show up as rows in the main pane. */
+.fd-fb {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  background: var(--surface);
+  color: var(--text);
+}
+.fd-fb-dropzone {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.fd-fb-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  flex: none;
+}
+.fd-fb-crumbs {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  min-width: 0;
+}
+.fd-fb-crumb {
+  display: flex;
+  align-items: center;
+  border-radius: var(--r-sm);
+}
+.fd-fb-crumb.is-drop-target {
+  background: var(--surface-brand);
+}
+.fd-fb-crumb:not(:last-child)::after {
+  content: "/";
+  margin: 0 4px;
+  color: var(--text-muted);
+}
+.fd-fb-crumb-link {
+  padding: 2px 4px;
+  border-radius: var(--r-sm);
+  background: none;
+  border: 0;
+  color: var(--text-2);
+  cursor: pointer;
+  font: inherit;
+}
+.fd-fb-crumb-link:hover {
+  background: var(--surface-2);
+  color: var(--text);
+}
+.fd-fb-crumb-current {
+  padding: 2px 4px;
+  font-weight: 600;
+  color: var(--text);
+}
+.fd-fb-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: none;
+}
+.fd-fb-body {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+.fd-fb-tree {
+  flex: 0 0 220px;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: 10px;
+  border-right: 1px solid var(--border);
+  background: var(--surface-2);
+}
+.fd-fb-main {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: 10px;
+  position: relative;
+}
+.fd-fb-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.fd-fb-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: var(--r-md);
+}
+.fd-fb-row.is-drop-target {
+  background: var(--surface-brand);
+  outline: 2px dashed var(--brand);
+  outline-offset: -2px;
+}
+.fd-fb-row-main {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  background: none;
+  border: 0;
+  text-align: left;
+  cursor: pointer;
+  border-radius: var(--r-md);
+  color: var(--text);
+  font: inherit;
+}
+.fd-fb-row-main:hover {
+  background: var(--surface-2);
+}
+.fd-fb-tree-row.is-current .fd-fb-row-main,
+.fd-fb-row.is-current .fd-fb-row-main {
+  background: var(--surface-brand);
+  color: var(--text-on-surface-brand);
+  font-weight: 600;
+}
+.fd-fb-row-icon {
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  flex: none;
+  color: var(--text-2);
+  font-size: 16px;
+}
+.fd-fb-row-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.fd-fb-row-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--body-sm-size);
+}
+.fd-fb-row-meta {
+  font-size: 11.5px;
+  color: var(--text-muted);
+}
+.fd-fb-row-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: none;
+  padding-right: 4px;
+}
+.fd-fb-tree-children {
+  padding-left: 14px;
+}
+.fd-fb-menu-anchor {
+  position: relative;
+  display: inline-flex;
+}
+.fd-fb-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 10;
+  width: 220px;
+  max-height: 280px;
+  overflow: auto;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--r-lg);
+  box-shadow: 0 16px 44px rgba(11, 13, 17, .18);
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.fd-fb-menu-title {
+  padding: 4px 8px 6px;
+  display: block;
+}
+.fd-fb-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: var(--r-sm);
+  background: none;
+  border: 0;
+  cursor: pointer;
+  text-align: left;
+  font-size: var(--body-sm-size);
+  color: var(--text);
+}
+.fd-fb-menu-item:hover {
+  background: var(--surface-2);
+}
+.fd-fb-input {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  font: inherit;
+  background: var(--surface);
+  color: var(--text);
+}
+/* Below 560px of `.fd-fb`'s OWN width, the tree pane has no room to justify itself: the
+   current folder's subfolders already appear as rows in `.fd-fb-main` (see the component
+   doc comment), so hiding the tree loses zero navigation, only the redundant second copy
+   of the hierarchy. Breadcrumbs plus that folder list is the whole nav surface below this
+   width, exactly as the card spec calls for. */
+@container (max-width: 560px) {
+  .fd-fb-tree {
+    display: none;
+  }
+}