@quilltap/theme-storybook 1.0.5 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -870,6 +870,54 @@ body {
870
870
  font-size: 2.25rem;
871
871
  margin-bottom: 0.5rem;
872
872
  }
873
+ .qt-file-preview-text-container {
874
+ position: relative;
875
+ width: 100%;
876
+ height: 100%;
877
+ }
878
+ .qt-copy-button {
879
+ display: flex;
880
+ align-items: center;
881
+ gap: 0.375rem;
882
+ padding: 0.375rem 0.625rem;
883
+ border-radius: var(--radius-md);
884
+ font-size: 0.75rem;
885
+ font-weight: 500;
886
+ transition: all 200ms;
887
+ background: var(--qt-copy-button-bg, rgba(0, 0, 0, 0.6));
888
+ color: var(--qt-copy-button-text, rgba(255, 255, 255, 0.9));
889
+ backdrop-filter: blur(4px);
890
+ border: 1px solid var(--qt-copy-button-border, rgba(255, 255, 255, 0.1));
891
+ }
892
+ .qt-copy-button:hover {
893
+ background: var(--qt-copy-button-hover-bg, rgba(0, 0, 0, 0.8));
894
+ color: var(--qt-copy-button-hover-text, #fff);
895
+ border-color: var(--qt-copy-button-hover-border, rgba(255, 255, 255, 0.2));
896
+ }
897
+ .qt-copy-button-success,
898
+ .qt-copy-button.qt-copy-button-success:hover {
899
+ background: var(--qt-copy-button-success-bg, rgba(34, 197, 94, 0.8));
900
+ color: var(--qt-copy-button-success-text, #fff);
901
+ border-color: var(--qt-copy-button-success-border, rgba(34, 197, 94, 0.5));
902
+ }
903
+ .qt-copy-button-icon {
904
+ padding: 0.5rem;
905
+ gap: 0;
906
+ }
907
+ .qt-copy-button-text {
908
+ display: none;
909
+ }
910
+ @media (min-width: 640px) {
911
+ .qt-copy-button-text {
912
+ display: inline;
913
+ }
914
+ }
915
+ .qt-file-preview-text-container .qt-copy-button {
916
+ position: absolute;
917
+ top: 0.5rem;
918
+ right: 0.5rem;
919
+ z-index: 10;
920
+ }
873
921
  .qt-wikilink {
874
922
  color: var(--color-primary);
875
923
  font-weight: 500;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@quilltap/theme-storybook",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
4
4
  "description": "Storybook preset and stories for developing Quilltap theme plugins",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -894,6 +894,65 @@
894
894
  margin-bottom: 0.5rem;
895
895
  }
896
896
 
897
+ .qt-file-preview-text-container {
898
+ position: relative;
899
+ width: 100%;
900
+ height: 100%;
901
+ }
902
+
903
+ /* Copy button - base styles for all contexts */
904
+ .qt-copy-button {
905
+ display: flex;
906
+ align-items: center;
907
+ gap: 0.375rem;
908
+ padding: 0.375rem 0.625rem;
909
+ border-radius: var(--radius-md);
910
+ font-size: 0.75rem;
911
+ font-weight: 500;
912
+ transition: all 200ms;
913
+ background: var(--qt-copy-button-bg, rgba(0, 0, 0, 0.6));
914
+ color: var(--qt-copy-button-text, rgba(255, 255, 255, 0.9));
915
+ backdrop-filter: blur(4px);
916
+ border: 1px solid var(--qt-copy-button-border, rgba(255, 255, 255, 0.1));
917
+ }
918
+
919
+ .qt-copy-button:hover {
920
+ background: var(--qt-copy-button-hover-bg, rgba(0, 0, 0, 0.8));
921
+ color: var(--qt-copy-button-hover-text, #fff);
922
+ border-color: var(--qt-copy-button-hover-border, rgba(255, 255, 255, 0.2));
923
+ }
924
+
925
+ .qt-copy-button-success,
926
+ .qt-copy-button.qt-copy-button-success:hover {
927
+ background: var(--qt-copy-button-success-bg, rgba(34, 197, 94, 0.8));
928
+ color: var(--qt-copy-button-success-text, #fff);
929
+ border-color: var(--qt-copy-button-success-border, rgba(34, 197, 94, 0.5));
930
+ }
931
+
932
+ /* Icon-only copy button variant */
933
+ .qt-copy-button-icon {
934
+ padding: 0.5rem;
935
+ gap: 0;
936
+ }
937
+
938
+ .qt-copy-button-text {
939
+ display: none;
940
+ }
941
+
942
+ @media (min-width: 640px) {
943
+ .qt-copy-button-text {
944
+ display: inline;
945
+ }
946
+ }
947
+
948
+ /* Copy button positioned for file preview overlay */
949
+ .qt-file-preview-text-container .qt-copy-button {
950
+ position: absolute;
951
+ top: 0.5rem;
952
+ right: 0.5rem;
953
+ z-index: 10;
954
+ }
955
+
897
956
  /* ==========================================================================
898
957
  WIKILINK COMPONENTS
899
958
  ========================================================================== */
@@ -114,8 +114,8 @@ console.log(message);`}
114
114
  <p style={{ margin: 0, lineHeight: 2 }}>
115
115
  This document references <button type="button" className="qt-wikilink">Character Profile</button> and
116
116
  links to <button type="button" className="qt-wikilink">World Building → Geography</button>.
117
- There's also a <button type="button" className="qt-wikilink-broken">Missing Document</button> that
118
- doesn't exist yet.
117
+ There&apos;s also a <button type="button" className="qt-wikilink-broken">Missing Document</button> that
118
+ doesn&apos;t exist yet.
119
119
  </p>
120
120
  </div>
121
121
  </section>