@flytedan/flytebot-design-system 0.12.15 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.12.15",
+  "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

@@ -6814,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;
+  }
+}