rails_pulse 0.1.0

data/app/assets/stylesheets/rails_pulse/components/csp_safe_positioning.css

@@ -0,0 +1,86 @@
+/* CSP-Safe Positioning Utilities for Rails Pulse */
+/* Supports dynamic positioning using CSS custom properties */
+
+/* Rails Pulse CSS loaded indicator for CSP testing */
+:root {
+  --rails-pulse-loaded: true;
+}
+
+/* Popover positioning using CSS custom properties */
+.positioned {
+  --popover-x: 0px;
+  --popover-y: 0px;
+  --context-menu-x: 0px;
+  --context-menu-y: 0px;
+}
+
+/* Popover positioning (used by popover_controller.js) */
+[popover].positioned {
+  position: fixed;
+  inset-inline-start: var(--popover-x, 0px) !important;
+  inset-block-start: var(--popover-y, 0px) !important;
+}
+
+/* Context menu positioning (used by context_menu_controller.js) */
+[popover].positioned {
+  inset-inline-start: var(--context-menu-x, var(--popover-x, 0px)) !important;
+  inset-block-start: var(--context-menu-y, var(--popover-y, 0px)) !important;
+}
+
+/* Icon loading states for icon_controller.js */
+[data-controller*="rails-pulse--icon"] {
+  display: inline-block;
+  line-height: 0;
+}
+
+[data-controller*="rails-pulse--icon"].loading {
+  opacity: 0.6;
+}
+
+[data-controller*="rails-pulse--icon"].error {
+  opacity: 0.4;
+  filter: grayscale(1);
+}
+
+[data-controller*="rails-pulse--icon"].loaded {
+  opacity: 1;
+}
+
+/* CSP-safe icon rendering */
+[data-controller*="rails-pulse--icon"] svg {
+  display: block;
+  width: inherit;
+  height: inherit;
+}
+
+/* Accessibility improvements */
+[data-controller*="rails-pulse--icon"][aria-label] {
+  position: relative;
+}
+
+/* Focus indicators for interactive icons */
+[data-controller*="rails-pulse--icon"]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* CSP Test Page Utilities */
+.csp-test-grid-single {
+  --columns: 1;
+}
+
+.csp-test-context-area {
+  padding: 2rem;
+  border: 2px dashed var(--color-border);
+  text-align: center;
+}
+
+.csp-test-nav-gap {
+  --column-gap: 1rem;
+}
+
+/* Sheet sizing for dialog */
+.csp-test-sheet {
+  --sheet-size: 288px;
+}

data/app/assets/stylesheets/rails_pulse/components/descriptive_list.css

@@ -0,0 +1,9 @@
+.descriptive-list {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: 0.5rem;
+}
+
+.descriptive-list dt, .descriptive-list dd {
+  font-size: var(--text-sm);
+}

data/app/assets/stylesheets/rails_pulse/components/dialog.css

@@ -0,0 +1,56 @@
+.dialog {
+  background-color: var(--color-bg);
+  border-radius: var(--rounded-lg);
+  border-width: var(--border);
+  box-shadow: var(--shadow-lg);
+  color: var(--color-text);
+  inline-size: var(--size-full);
+  margin: auto;
+  max-inline-size: var(--dialog-size, var(--max-i-lg));
+
+  &::backdrop {
+    background-color: rgba(0, 0, 0, .8);
+  }
+
+  /* Final state of exit animation and setup */
+  opacity: 0;
+  transform: var(--scale-95);
+  transition-behavior: allow-discrete;
+  transition-duration: var(--time-200);
+  transition-property: display, overlay, opacity, transform;
+
+  &::backdrop {
+    opacity: 0;
+    transition-behavior: allow-discrete;
+    transition-duration: var(--time-200);
+    transition-property: display, overlay, opacity;
+  }
+
+  /* Final state of entry animation */
+  &[open] { opacity: 1; transform: var(--scale-100); }
+  &[open]::backdrop { opacity: 1; }
+
+  /* Initial state of entry animation */
+  @starting-style {
+    &[open] { opacity: 0; transform: var(--scale-95); }
+    &[open]::backdrop { opacity: 0; }
+  }
+
+  /* Drawer component on mobile  */
+  @media (width < 40rem) {
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+    margin-block-end: 0;
+    max-inline-size: none;
+  }
+}
+
+.dialog__content {
+  padding: var(--size-6);
+}
+
+.dialog__close {
+  inset-block-start: var(--size-3);
+  inset-inline-end:  var(--size-3);
+  position: absolute;
+}

data/app/assets/stylesheets/rails_pulse/components/flash.css

@@ -0,0 +1,47 @@
+.flash {
+  align-items: center;
+  animation: appear-then-fade 4s 300ms both;
+  backdrop-filter: var(--blur-sm) var(--contrast-75);
+  background-color: var(--flash-background, rgb(from var(--color-text) r g b / .65));
+  border-radius: var(--rounded-full);
+  color: var(--flash-color, var(--color-text-reversed));
+  column-gap: var(--size-2);
+  display: flex;
+  font-size: var(--text-fluid-base);
+  justify-content: center;
+  line-height: var(--leading-none);
+  margin-block-start: var(--flash-position, var(--size-4));
+  margin-inline: auto;
+  min-block-size: var(--size-11);
+  padding: var(--size-1) var(--size-4);
+  text-align: center;
+
+  [data-turbo-preview] & {
+    display: none;
+  }
+}
+
+.flash--positive {
+  --flash-background: var(--color-positive);
+  --flash-color: white;
+}
+
+.flash--negative {
+  --flash-background: var(--color-negative);
+  --flash-color: white;
+}
+
+.flash--extended {
+  animation-name: appear-then-fade-extended;
+  animation-duration: 12s;
+}
+
+@keyframes appear-then-fade {
+  0%, 100% { opacity: 0; }
+  5%, 60%  { opacity: 1; }
+}
+
+@keyframes appear-then-fade-extended {
+  0%, 100% { opacity: 0; }
+  2%, 90% { opacity: 1; }
+}

data/app/assets/stylesheets/rails_pulse/components/input.css

@@ -0,0 +1,80 @@
+.input {
+  appearance: none;
+  background-color: var(--input-background, transparent);
+  block-size: var(--input-block-size, auto);
+  border: 1px solid var(--input-border-color, var(--color-border));
+  border-radius: var(--input-radius, var(--rounded-md));
+  box-shadow: var(--input-box-shadow, var(--shadow-xs));
+  font-size: var(--input-font-size, var(--text-sm));
+  inline-size: var(--input-inline-size, var(--size-full));
+  padding: var(--input-padding, .375rem .75rem);
+
+  &:is(textarea[rows=auto]) {
+    field-sizing: content;
+    max-block-size: calc(.875rem + var(--input-max-rows, 10lh));
+    min-block-size: calc(.875rem + var(--input-rows, 2lh));
+  }
+
+  &:is(select):not([multiple], [size]) {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
+    background-position: center right var(--size-2);
+    background-repeat: no-repeat;
+    background-size: var(--size-4) auto;
+  }
+
+  &::file-selector-button {
+    font-weight: var(--font-medium);
+  }
+
+  &:user-invalid {
+    border-color: var(--color-negative);
+  }
+
+  &:user-invalid ~ .invalid-feedback {
+    display: flex;
+  }
+
+  &:disabled {
+    cursor: not-allowed; opacity: var(--opacity-50);
+  }
+}
+
+.input--actor {
+  input {
+    border: 0; inline-size: 100%; outline: 0;
+  }
+
+  img:not([class]) {
+    filter: var(--input-icon-color, var(--color-filter-text));
+  }
+
+  &:focus-within {
+    outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);
+  }
+}
+
+.invalid-feedback {
+  display: none;
+}
+
+:is(.checkbox, .radio) {
+  transform: scale(1.2);
+}
+
+:is(.checkbox, .radio, .range) {
+  accent-color: var(--color-primary);
+}
+
+:is(.input, .checkbox, .radio, .range) {
+  &:focus-visible {
+    outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);
+  }
+
+  &:focus-visible:user-invalid  {
+    outline: none;
+  }
+
+  .field_with_errors & {
+    border-color: var(--color-negative); display: contents;
+  }
+}

data/app/assets/stylesheets/rails_pulse/components/layouts.css

@@ -0,0 +1,63 @@
+.sidebar-layout {
+  display: grid;
+  grid-template-areas: "header header" "sidebar main";
+  grid-template-columns: var(--sidebar-width, 0) 1fr;
+  grid-template-rows: auto 1fr;
+  block-size: 100dvh;
+
+  @media (width >= 48rem) {
+    --sidebar-border-width: var(--border);
+    --sidebar-padding: var(--size-2);
+    --sidebar-width: var(--max-i-3xs);
+  }
+}
+
+.header-layout {
+  display: grid;
+  grid-template-areas: "header" "main";
+  grid-template-rows: auto 1fr;
+  block-size: 100dvh;
+}
+
+.centered-layout {
+  display: grid;
+  place-items: center;
+  block-size: 100dvh;
+}
+
+.container {
+  inline-size: 100%;
+  margin-inline: auto;
+  max-inline-size: var(--container-width, 80rem);
+}
+
+#header {
+  align-items: center;
+  background-color: rgb(from var(--color-border-light) r g b / .5);
+  border-block-end-width: var(--border);
+  block-size: var(--size-16);
+  column-gap: var(--size-4);
+  display: flex;
+  grid-area: header;
+  padding-inline: var(--size-4);
+}
+
+#sidebar {
+  background-color: rgb(from var(--color-border-light) r g b / .5);
+  border-inline-end-width: var(--sidebar-border-width, 0);
+  display: flex;
+  flex-direction: column;
+  grid-area: sidebar;
+  overflow-x: hidden;
+  padding: var(--sidebar-padding, 0);
+  row-gap: var(--size-2);
+}
+
+#main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-4);
+  grid-area: main;
+  overflow: auto;
+  padding: var(--size-4);
+}

data/app/assets/stylesheets/rails_pulse/components/menu.css

@@ -0,0 +1,43 @@
+.menu {
+  display: flex;
+  flex-direction: column;
+  padding: var(--size-1);
+  row-gap: var(--size-1);
+}
+
+.menu__header {
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  padding: var(--size-1_5) var(--size-2);
+}
+
+.menu__group {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1px;
+}
+
+.menu__separator {
+  margin-inline: -0.25rem;
+}
+
+.menu__item {
+  --btn-border-color: transparent;
+  --btn-box-shadow: none;
+  --btn-font-weight: var(--font-normal);
+  --btn-hover-color: var(--color-secondary);
+  --btn-justify-content: start;
+  --btn-outline-size: 0;
+  --btn-padding: var(--size-1_5) var(--size-2);
+  --btn-text-align: start;
+
+  &:focus-visible {
+    --btn-background: var(--color-secondary);
+  }
+}
+
+.menu__item-key {
+  color: var(--color-text-subtle);
+  font-size: var(--text-xs);
+  margin-inline-start: auto;
+}

data/app/assets/stylesheets/rails_pulse/components/popover.css

@@ -0,0 +1,36 @@
+.popover {
+  background-color: var(--color-bg);
+  border-radius: var(--rounded-md);
+  border-width: var(--border);
+  box-shadow: var(--shadow-md);
+  color: var(--color-text);
+  inline-size: var(--popover-size, max-content);
+
+  /* Final state of exit animation and setup */
+  opacity: 0;
+  transform: var(--scale-95);
+  transition-behavior: allow-discrete;
+  transition-duration: var(--time-150);
+  transition-property: display, overlay, opacity, transform;
+
+  /* Final state of entry animation */
+  &:popover-open {
+    opacity: 1; transform: var(--scale-100);
+  }
+
+  /* Initial state of entry animation */
+  @starting-style {
+    &:popover-open {
+      opacity: 0; transform: var(--scale-95);
+    }
+  }
+
+  /* Positioning rules for Floating UI */
+  &.positioned {
+    position: fixed !important;
+    left: var(--popover-x, 0) !important;
+    top: var(--popover-y, 0) !important;
+    margin: 0 !important;
+    inset: unset !important;
+  }
+}

data/app/assets/stylesheets/rails_pulse/components/prose.css

@@ -0,0 +1,144 @@
+.prose {
+  font-size: var(--text-fluid-base);
+  max-inline-size: 65ch;
+
+  /* Antialiased fonts */
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+
+  :is(h1, h2, h3, h4, h5, h6) {
+    font-weight: var(--font-extrabold);
+    hyphens: auto;
+    letter-spacing: -0.02ch;
+    line-height: 1.1;
+    margin-block: 0.5em;
+    overflow-wrap: break-word;
+    text-wrap: balance;
+  }
+
+  h1 {
+    font-size: 2.4em;
+  }
+
+  h2 {
+    font-size: 1.8em;
+  }
+
+  h3 {
+    font-size: 1.5em;
+  }
+
+  h4 {
+    font-size: 1.2em;
+  }
+
+  h5 {
+    font-size: 1em;
+  }
+
+  h6 {
+    font-size: 0.8em;
+  }
+
+  :is(ul, ol, menu) {
+    list-style: revert;
+    padding-inline-start: revert;
+  }
+
+  :is(p, ul, ol, dl, blockquote, pre, figure, table, hr) {
+    margin-block: 0.65lh;
+    overflow-wrap: break-word;
+    text-wrap: pretty;
+  }
+
+  hr {
+    border-color: var(--color-border-dark);
+    border-style: var(--border-style, solid) none none;
+    margin: 2lh auto;
+  }
+
+  :is(b, strong) {
+    font-weight: var(--font-bold);
+  }
+
+  :is(pre, code) {
+    background-color: var(--color-border-light);
+    border: 1px solid var(--color-border);
+    border-radius: var(--rounded-sm);
+    font-family: var(--font-monospace-code);
+    font-size: 0.85em;
+  }
+
+  code {
+    padding: 0.1em 0.3em;
+  }
+
+  pre {
+    border-radius: 0.5em;
+    overflow-x: auto;
+    padding: 0.5lh 2ch;
+    text-wrap: nowrap;
+  }
+
+  pre code {
+    background-color: transparent;
+    border: 0;
+    font-size: 1em;
+    padding: 0;
+  }
+
+  p {
+    hyphens: auto;
+    letter-spacing: -0.005ch;
+  }
+
+  blockquote {
+    font-style: italic;
+    margin: 0 3ch;
+  }
+
+  blockquote p {
+    hyphens: none;
+  }
+
+  table {
+    border: 1px solid var(--color-border-dark);
+    border-collapse: collapse;
+    margin: 1lh 0;
+  }
+
+  th {
+    font-weight: var(--font-bold);
+  }
+
+  :is(th, td) {
+    border: 1px solid var(--color-border-dark);
+    padding: 0.2lh 1ch;
+    text-align: start;
+  }
+
+  th {
+    border-block-end-width: 3px;
+  }
+
+  del {
+    background-color: rgb(from var(--color-negative) r g b / .1);
+    color: var(--color-negative);
+  }
+
+  ins {
+    background-color: rgb(from var(--color-positive) r g b / .1);
+    color: var(--color-positive);
+  }
+
+  a {
+    color: var(--color-link);
+    text-decoration: underline;
+    text-decoration-skip-ink: auto;
+  }
+
+  mark {
+    color: var(--color-text);
+    background-color: var(--color-highlight);
+  }
+}

data/app/assets/stylesheets/rails_pulse/components/row.css

@@ -0,0 +1,24 @@
+.row {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  gap: var(--column-gap, 0.5rem);
+}
+
+.row > * {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Stack items on smaller screens */
+@media (max-width: 768px) {
+  .row {
+      flex-direction: column;
+      gap: 0.5rem;
+  }
+
+  .row > * {
+      flex: none;
+      width: 100%;
+  }
+}

data/app/assets/stylesheets/rails_pulse/components/sidebar_menu.css

@@ -0,0 +1,79 @@
+.sidebar-menu {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--size-4);
+  block-size: var(--size-full);
+}
+
+.sidebar-menu__button {
+  --btn-background: transparent;
+  --btn-border-color: transparent;
+  --btn-box-shadow: none;
+  --btn-font-weight: var(--font-normal);
+  --btn-hover-color: var(--color-secondary);
+  --btn-justify-content: start;
+  --btn-outline-size: 0;
+  --btn-inline-size: var(--size-full);
+  --btn-padding: var(--size-1) var(--size-2);
+  --btn-text-align: start;
+
+  &:focus-visible {
+    --btn-background: var(--color-secondary);
+  }
+
+  &:is(summary) {
+    &::after {
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m9 18 6-6-6-6'/%3e%3c/svg%3e");
+      background-size: cover;
+      block-size: var(--size-4);
+      content: "";
+      filter: var(--color-filter-text);
+      inline-size: var(--size-4);
+      margin-inline-start: auto;
+      min-inline-size: var(--size-4);
+      transition: transform var(--time-200);
+    }
+
+    details[open] > &::after {
+      transform: var(--rotate-90);
+    }
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+}
+
+.sidebar-menu__content {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--size-4);
+  overflow-y: scroll;
+}
+
+.sidebar-menu__group {
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-menu__group-label {
+  color: var(--color-text-subtle);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  padding: var(--size-1_5) var(--size-2);
+}
+
+.sidebar-menu__items {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--size-1);
+}
+
+.sidebar-menu__sub {
+  border-inline-start-width: var(--border);
+  display: flex;
+  flex-direction: column;
+  margin-inline-start: var(--size-4);
+  padding: var(--size-0_5) var(--size-2);
+  row-gap: var(--size-1);
+}

data/app/assets/stylesheets/rails_pulse/components/skeleton.css

@@ -0,0 +1,5 @@
+.skeleton {
+  animation: var(--animate-blink);
+  border-radius: var(--rounded-md);
+  background-color: var(--color-border-light);
+}