@mosetta/editor 0.0.0-stage → 0.0.28

package/tiles/pageModules/pageModules.css

@@ -0,0 +1,383 @@
+/* the modules of a page: a head, a scrolled tree, the visits at the foot */
+.page-modules {
+  --pm-bytes: 76px;
+  --pm-gzip: 86px;
+
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  font: var(--mosetta-wb-font, 14px)/1.45 ui-sans-serif, system-ui, sans-serif;
+  color: #27272a;
+  background: #fff;
+}
+
+.page-modules--bare {
+  padding: 16px;
+  color: #71717a;
+}
+
+.page-modules__head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px 6px 12px;
+  border-bottom: 1px solid #e4e4e7;
+}
+
+.page-modules__title {
+  font-weight: 600;
+  color: #18181b;
+}
+
+.page-modules__status {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: #a1a1aa;
+  font-size: var(--mosetta-wb-font-sm, 13px);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.page-modules__action {
+  width: var(--mosetta-wb-icon-box, 24px);
+  height: var(--mosetta-wb-icon-box, 24px);
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: #52525b;
+  font-size: 15px;
+  cursor: pointer;
+}
+
+.page-modules__action:hover {
+  background: #f4f4f5;
+}
+
+.page-modules__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.page-modules[data-busy] .page-modules__body,
+.page-modules[data-busy] .page-modules__sum {
+  opacity: 0.6;
+}
+
+.page-modules__section {
+  border-bottom: 1px solid #e4e4e7;
+}
+
+/* ---- the tree ---- */
+
+.page-modules__columns {
+  display: flex;
+  gap: 8px;
+  padding: 6px 12px 4px 34px;
+  color: #a1a1aa;
+  font-size: var(--mosetta-wb-font-xs, 12px);
+}
+
+.page-modules__columns > :first-child {
+  flex: 1;
+  text-align: left;
+}
+
+/* a column orders the tree by what it shows */
+.page-modules__column {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.page-modules__column:hover,
+.page-modules__column--on {
+  color: #18181b;
+}
+
+.page-modules__line {
+  --depth: 0;
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 30px;
+  padding: 0 12px 0 calc(8px + var(--depth) * 20px);
+  border-top: 1px solid #f4f4f5;
+  cursor: default;
+}
+
+.page-modules__line:has(.page-modules__opener:not(.page-modules__opener--none)) {
+  cursor: pointer;
+}
+
+.page-modules__line:hover {
+  background-color: #fafafa;
+}
+
+/* the share of the first visit the row weighs, drawn behind it — green for a crumb, red for a third
+   of the page (the hue comes with the row) */
+.page-modules__line--bar {
+  background-image: linear-gradient(90deg, hsl(var(--hue, 120) 70% 46% / 16%) var(--share, 0%), transparent var(--share, 0%));
+  background-repeat: no-repeat;
+}
+
+.page-modules__opener {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #71717a;
+  cursor: pointer;
+}
+
+.page-modules__opener svg {
+  width: 14px;
+  height: 14px;
+  transition: transform 0.12s ease;
+}
+
+.page-modules__opener--open svg {
+  transform: rotate(90deg);
+}
+
+.page-modules__opener:hover {
+  background: #e4e4e7;
+}
+
+.page-modules__opener--none {
+  visibility: hidden;
+}
+
+.page-modules__name {
+  flex: none;
+  max-width: 55%;
+  overflow: hidden;
+  color: #18181b;
+  font-weight: 500;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* a dependency reads as code — a package and its version */
+[data-test-id="page-modules-dep"] > .page-modules__line .page-modules__name {
+  font: 500 var(--mosetta-wb-font-sm, 13px)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.page-modules__meta {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: #a1a1aa;
+  font-size: var(--mosetta-wb-font-sm, 13px);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.page-modules__node--quiet > .page-modules__line .page-modules__name {
+  color: #a1a1aa;
+  text-decoration: line-through;
+}
+
+.page-modules__version {
+  font: var(--mosetta-wb-font-sm, 13px)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: #52525b;
+}
+
+.page-modules__version s {
+  color: #a1a1aa;
+}
+
+.page-modules__version--crossed {
+  color: #1d4ed8;
+}
+
+.page-modules__version--lower {
+  color: #b91c1c;
+}
+
+.page-modules__version--absent {
+  color: #a1a1aa;
+}
+
+.page-modules__weight {
+  display: inline-flex;
+  flex: none;
+  color: #3f3f46;
+  font: var(--mosetta-wb-font-xs, 12px)/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
+  white-space: nowrap;
+}
+
+.page-modules__bytes,
+.page-modules__gzip {
+  flex: none;
+  text-align: right;
+}
+
+.page-modules__bytes {
+  width: var(--pm-bytes);
+}
+
+.page-modules__gzip {
+  width: var(--pm-gzip);
+  color: #a1a1aa;
+}
+
+.page-modules__weight--quiet .page-modules__bytes {
+  color: #a1a1aa;
+  text-decoration: line-through;
+}
+
+/* ---- the rules ---- */
+
+.page-modules__rules {
+  padding-bottom: 8px;
+}
+
+.page-modules__rule {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  padding: 5px 12px 5px 34px;
+  border-top: 1px solid #f4f4f5;
+}
+
+.page-modules__key {
+  padding: 0 6px;
+  border-radius: 4px;
+  background: #f4f4f5;
+  font: var(--mosetta-wb-font-xs, 12px)/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.page-modules__rule-text {
+  flex: 1;
+  min-width: 0;
+  color: #52525b;
+}
+
+.page-modules__tag {
+  padding: 0 6px;
+  border-radius: 4px;
+  background: #dbeafe;
+  color: #1d4ed8;
+  font-size: var(--mosetta-wb-font-xs, 12px);
+}
+
+.page-modules__tag--quiet {
+  background: #f4f4f5;
+  color: #71717a;
+}
+
+.page-modules__link {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: #71717a;
+  font: inherit;
+  font-size: var(--mosetta-wb-font-sm, 13px);
+  cursor: pointer;
+}
+
+.page-modules__link:hover {
+  color: #b91c1c;
+}
+
+.page-modules__add {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px 0 34px;
+}
+
+.page-modules__input {
+  height: calc(var(--mosetta-wb-icon-box, 24px) + 4px);
+  padding: 0 8px;
+  border: 1px solid #d4d4d8;
+  border-radius: 6px;
+  font: inherit;
+  font-size: var(--mosetta-wb-font-sm, 13px);
+  color: #27272a;
+  background: #fff;
+}
+
+input.page-modules__input {
+  width: 200px;
+}
+
+.page-modules__button {
+  height: calc(var(--mosetta-wb-icon-box, 24px) + 4px);
+  padding: 0 12px;
+  border: 1px solid #d4d4d8;
+  border-radius: 6px;
+  font: inherit;
+  font-size: var(--mosetta-wb-font-sm, 13px);
+  color: #27272a;
+  background: #fff;
+  cursor: pointer;
+}
+
+.page-modules__button:hover {
+  background: #f4f4f5;
+}
+
+.page-modules__error {
+  margin: 0;
+  padding: 6px 12px;
+  color: #b91c1c;
+  font-size: var(--mosetta-wb-font-sm, 13px);
+}
+
+.page-modules__add .page-modules__error {
+  flex-basis: 100%;
+  padding: 0;
+}
+
+.page-modules__note {
+  margin: 6px 12px 0 34px;
+  color: #a1a1aa;
+  font-size: var(--mosetta-wb-font-sm, 13px);
+}
+
+/* ---- the visits ---- */
+
+.page-modules__sum {
+  max-height: 45%;
+  overflow-y: auto;
+  border-top: 1px solid #d4d4d8;
+  background: #fafafa;
+}
+
+.page-modules__sum > .page-modules__node:first-child > .page-modules__line {
+  border-top: 0;
+}
+
+[data-test-id="page-modules-visit"] > .page-modules__line .page-modules__name,
+[data-test-id="page-modules-visit"] > .page-modules__line .page-modules__bytes {
+  color: #18181b;
+  font-weight: 600;
+}
+
+/* the total under the list: what the rows above weigh together */
+[data-test-id="page-modules-total-row"] > .page-modules__line {
+  border-top: 1px solid #d4d4d8;
+}
+
+[data-test-id="page-modules-total-row"] > .page-modules__line .page-modules__name,
+[data-test-id="page-modules-total-row"] > .page-modules__line .page-modules__bytes,
+[data-test-id="page-modules-packages"] > .page-modules__line .page-modules__name {
+  color: #18181b;
+  font-weight: 600;
+}

package/tiles/pageModules/pageModules.icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="none" stroke="#52525b" stroke-width="1.3" stroke-linejoin="round"><path d="M8 1.8l5 2.6v5.2l-5 2.6-5-2.6V4.4z"/><path d="M3 4.4l5 2.6 5-2.6M8 7v5.2"/><path d="M3.5 13.3l4.5 1.9 4.5-1.9" stroke-linecap="round"/></g></svg>